Flexible CSS Buttons Tutorial
Juli 13, 2008 | Kommentieren
Dieser Artikel zeigt wie man flexible CSS Buttons mit der “sliding doors” Technik erstellt. Auf die Dauer ist diese Technik komforatbler, da man den Button überall im Quelltext einsetzen kann. Es wird einfach nur der Text im Button ausgetauscht und man braucht nicht jedesemal eine neue Button-Grafik zu erstellen.
Um einen flexiblen Button zu erstellen benötigt man zuerst 2 Hintergrundgrafiken.
Eine Grafik für die linke Seite und eine für die rechte.
Jetzt kommt das HTML. Ich benutze hierfür einmal ein <span> innerhalb eines <a> Elements. Das <span> ist für die linke Hintergrundgrafik zuständig, welches auch gleichzeitig für die flexible Breite sorgt:
<a href="#" class="button"><span>Submit</span></a>
Im CSS Code haben wir einmal die Klasse a.button die für den <a> Tag und einmal die .button span für das <span>.
a.button { background: url(images/button_right.gif) no-repeat scroll top right; display: block; float: left; height: 26px; margin-right: 6px; padding-right: 15px; text-decoration: none; color: #FFF; font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; } a.button span { background: url(images/button_left.gif) no-repeat; display: block; padding: 2px 0 4px 15px; }
Und hier das fertige Ergebnis:
