CSS: Formular-Button mit Bild gestalten

Wer ein Formular fürs Internet erstellt kommt unweigerlich an Buttons nicht vorbei, denn die eingegebenen Daten müssen auf Knopfdruck versendet werden oder aber auch gelöscht werden können. Die Schaltflächen, die HTML standardmäßig zur Verfügung stellt, wirken im tristen Grau mittelalterlich. Um die Buttons ein wenig aufzupeppen bietet CSS vielfältige Möglichkeiten. Unter anderem können Buttons, die eine bestimmte Funktion erfüllen, mit einem Bild versehen werden, was die Bedienung des Formulars intuitiv macht und grafisch ansprechender erscheinen lässt.

PictureButtons

Das obige Bild zeigt drei Beispiel-Button zum Speichern, Email versenden oder Warenkorb aufrufen. Möglich wird dies indem man dem jeweiligen Button eine entsprechende CSS-Klasse zuweist. Der zugehörige CSS-Code, welcher in den Head-Bereich der HTML-Seiten oder in eine separate CSS-Datei eingefügt werden muss, sieht für das Beispiel des “Speichern”-Button wie folgt aus:

<style type="text/css">
.PictureButtonSave {
	padding:0;
	margin:0;
	border:1px solid #D9DDDE;
	background-image:url(save.gif);
	background-repeat:no-repeat;
	font-size:12px;
	background-position: 3px 3px;
	width:100px;
	}
</style>

Die entscheidende Eigenschaft ist background-image. Hier geben Sie die URL des Bildes als absoluten oder relativen Pfad an. Und mit background-position bestimmen Sie die Position des Bildes auf dem Button, wobei die erste Ziffer der horizontale Versatz (x-Richtung) und die zweite Ziffer der vertikale Versatz (y-Richtung) ausgehend von der linken oberen Ecke ist.

Die anderen Eigenschaften dienen der weiteren Gestaltung des Buttons. So kann z.B. ein Rahmen (border) um den Button definiert werden, Schrifteigenschaften, wie Schriftgröße (font-size) oder Breite (width) und Höhe des Button festgelegt werden. Die Klasse kann auch um weitere CSS-Eigenschaften erweitert werden.

Damit der Button im vordefinierten Design erscheint muss man ihm im HTML-Code die CSS-Klasse zuweisen. Der zugehörige HTML-Text sieht dann so aus:

<input class="PictureButtonSave " type="submit" name="save" value="    Speichern">

In wenigen Handgriffen hat man so einen schönen Button. Lagert man die entsprechende CSS-Klasse aus, kann man über alle seine Webseiten ein einheitliches Design für die Buttons definieren.

Kommentar hinterlassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.