 Buttons formatieren mit CSS 02
Beispiele zur Gestaltung CSS-formatierten Formularbuttons mit Hintergrundgrafiken. Demonstriert wird hier der Einfluss unterschiedlicher Notierungen für Border und Hintergrundfarbe auf das Erscheinungsbild der Buttons.
 Buttons formatieren mit CSS 01 Grafik als Formular-Button
Wie man mit CSS-Formatierungen Einfluss auf Größe, Form und Farbe nimmt, haben sie bereits auf der Beispielseite 01 gelesen. Hier werden nun zusätzlich Hintergrundgrafiken eingesetzt.
... nur zum Vergleich, so sieht der übliche Befehl für den Sendebutton aus:
<input type="submit" value=" Anfrage senden ">
CSS-formatierte Formular-Buttons
Ich zeige hier 4 Beispiele der CSS-Formatierng mit Hintergrundgrafik auf. Obwohl immer die gleiche Grafik verwendet wird, werden sie (in einem Browser mehr, in anderen weniger) Unterschiede feststellen. Diese Unterschiede werden durch die Angaben für den Rand, und für die Beispiele 2 + 3 außerdem durch die Notierung der abweichenden Hintergrundfarbe hervorgerufen.
Button Beispiel 1
<input value="Abschicken" class="Button01" type="submit">
Die CSS-Notierungen für den Button oben:
.Button01 {
height: 20px;
width:160px;
font-family:Verdana,sans;
font-size:11px;
color: #FFFFFF;
border:none;
background-image: url(b200-16.gif);
}
Button Beispiel 2
<input value="Abschicken" class="Button02" type="submit">
Die CSS-Notierungen für den Button oben:
.Button02 {
height: 22px;
width:160px;
font-family:Verdana,sans;
font-size:11px;
color: #FFFFFF;
background-color: #6AB1F1;
border:1px solid #FFFFFF;
background-image: url(b200-16.gif);
}
Button Beispiel 3
<input value="Abschicken" class="Button03" type="submit">
Die CSS-Notierungen für den Button oben:
.Button03 {
height: 22px;
width:160px;
font-family:Verdana,sans;
font-size:11px;
color: #FFFFFF;
background-color: #303670;
border:1px solid #FFFFFF;
background-image: url(b200-16.gif);
}
Button Beispiel 4
<input value="Abschicken" class="Button04" type="submit">
Die CSS-Notierungen für den Button oben:
.Button04 {
height: 22px;
width:160px;
font-family:Verdana,sans;
font-size:11px;
color: #FFFFFF;
background-color: #FFFFFF;
border-top:1px solid #00C0FF;
border-left:1px solid #00C0FF;
border-bottom:1px solid #0070C0;
border-right:1px solid #0070C0;
background-image: url(b200-16.gif);
}
selbst erstellte Grafiken (weitere in meiner MINI-IMAGE-BOX):
 b200-14.gif
 b200-15.gif
 b200-16.gif
 b200-17.gif
 b200-18.gif
 b200-19.gif
 b200-20.gif
 b200-22.gif
| 
WWW.WEB-TOOLBOX.NET
ZURÜCK