3D-Buttons mit CSS

Gelesen bei AboutWebDesign.de
URL: http://www.aboutwebdesign.de/awd/content/1095938031.shtml

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: