 |
Mit CSS lassen sich nette 3D-Buttons erzeugen - auch Klick-Effekte sind möglich.
Buttons definieren
Dazu definiert man am besten zunächst einige Buttons, in etwa so wie hier:
<ul>
<li class="button"><a href="abc" class="button">Mein Button 1</a></li>
<li class="button"><a href="abc" class="button">Mein Button 2</a></li>
</ul>
Buttons stylen
Mit CSS werden wir diesen Buttons nun ihr Button-Aussehen verpassen:
a.button {font-family: ms sans serif; font-size: 10pt; text-decoration: none; display: block; width: 150px; text-align: center; border-width: 3px; color: black; border-color: #e3e3e3; border-style: outset; background: #e3e3e3;}
a.button:active { border-style: inset;}
li.button {list-style-type: none; margin: 10px;}
Wir haben in diesem Beispiel die wirklich wichtigen Teile fett hervorgehoben - die anderen Angaben haben lediglich kosmetische Funktion.
Die erste CSS-Angabe formatiert die oben erzeugten HTML-Links. Sie bestimmt, dass die Links als block angezeigt werden sollen und gibt ihnen eine feste Breite. Mit den border-Angaben wird nun der zum block gehörende Rahmen spezifiziert - es entstehen nette Effekte, wenn die Hintergrundfarbe und die Rahmenfarbe aneinander angepasst werden.
Mit der nun folgenden CSS-Pseudoklasse legen wir fest, dass der Link bei einem Klick seinen Rahmen im inset-Modus (also "eingedrückt") darstellen soll.
Die letzte Angabe schließlich dient dazu, die Auszählungszeichen der Liste zu entfernen.
Probleme und Erweiterbarkeit
Etwas unschön: klickt man einen Link an und verwendet dann den Zurück-Button des Browsers, so wird der Button (zumindest vom IE) immer noch im active-Zustand dargestellt.
Zusätzlich (oder auch alternativ) lässt sich eine hover-Pseudoklasse definieren.
Beispiel
Das Beispiel finden Sie hier zum Ansehen.
Vorteile
Gegenüber mit Bildern und/oder JavaScript realisierten Menüs bieten die CSS-Buttons einige Vorteile:
- Ältere Browser stellen die Links problemlos dar
- Die Accessibility ist besser: Screenreader schlucken den Code problemlos
- Schließlich finden die Button-Titel - da einfache Links - in den Suchmaschinen verstärkte Beachtung
|
|
|
|
Sie wollen diese Seite ausdrucken? Dafür haben wir eine spezielle Druckversion ohne grafische Elemente entwickelt! |
|
|
Einführung in CSS bei HTMLWorld.
|
|
