 Buttons formatieren mit CSS 01 (ohne Hintergrund-Grafik)
Buttons müssen nicht langweilig sein. Sie sind nicht an die Form der üblichen Buttons gebunden, die ohnehin in den unterschiedlichen Browsern nicht gleich aussehen. Mit CSS-Formatierungen haben sie 'unbegrenzte' Gestaltungsmöglichkeiten.
 20.05.2008, Zusätzlich Art des Mauszeigers festgelegt mit cursor: pointer;
 Buttons formatieren mit CSS 02 Grafik als Formular-Button
Statt eines Standard-Formularbuttons anzuzeigen, können sie mit einer CSS-Formatierung Einfluss auf Größe, Form und Farbe nehmen. Hier einige Beispiele ohne Hintergrundgrafik.
... nur zum Vergleich, so sieht der übliche Befehl für den Sendebutton aus:
<input type="submit" value=" senden ">
Formatierung mit CSS
Der HTML-Code ist bis auf das zusätzliche Attribut 'class' mit dem üblichen Buttoncode identisch. Mit der Angabe einer CSS-Klasse verknüpfen sie die Formatierungsanweisungen, die im Kopfbereich des Formulars für genau diese Klasse notiert wurde.
a) Button Beispiel
<input class="sende01" type="Submit" value=" senden ">
Der CSS-Code im Head-Bereich für diesen Button:
<style type="text/css">
<!--
.sende01 {
cursor: pointer;
font:11px Arial, Helvetica;
color:#000000;
border: 1px solid #2C6ED5;
background-color: #DDDDFF;
width:120px;
}
-->
</style>
b) Button Beispiel
Beachten sie den Unterschied zum Beispiel oben, wenn sie die Angaben für den Rand weglassen. In den meisten Browsern wird der übliche 3D-Effekt sichtbar während die Buttonfarbe den CSS-Angaben der Hintergrundfarbe entspricht!
<input class="sende02" type="Submit" value=" senden ">
Der CSS-Code im Head-Bereich für diesen Button:
<style type="text/css">
<!--
.sende02 {
cursor: pointer;
font:11px Arial, Helvetica;
color:#000000;
background-color: #DDDDFF;
width:120px;
}
-->
</style>
c) Button Beispiel
Button mit Inline-Style-Angaben
Natürlich können sie die Style-Angaben auch direkt im Input-Tag notieren.
<input
style="cursor: pointer;
background-color:#DDDDFF;
width:120px;
font:11px Arial, Helvetica;
color:#5171B2;"
type="submit"
name="Sendebutt"
value=" SENDEN ">
d) Button Beispiel
Button alternierender Text
Zusätzliche Eintragungen:
<input
type="submit"
name="Sendebutton"
onmouseover="this.value=' nur einmal klicken '"
onmouseout="this.value=' senden '"
value=" senden ">
| 
WWW.WEB-TOOLBOX.NET
ZURÜCK