Daniel's Blog

Wie versprochen kommt heute der erste Artikel zum Thema CSS3.

Ich werde erklären, wie man einen 3D-Effekt bei Buttons erzeugt, wie ich ihn bei den Navigationslinks auf meinem Blog verwende.

Dafür gibt es einen einfachen Trick: Ein einfacher Farbverlauf von hell nach dunkel, in Kombination mit abgerundeten Ecken, erzeugt einen relativ plastischen Effekt.

Nun zur Umsetzung:

HTML-Code

1 <a href="http://example.com" class="button" >Button</a>

Mehr ist nicht nötig, der Rest wird nur mit CSS gemacht.

CSS-Code

 1 a.button
 2 {
 3   display: inline-block;
 4   width: 100px;
 5   text-align: center;
 6   -moz-border-radius: 5px;
 7   -webkit-border-radius: 5px;
 8   border-radius: 5px;
 9   border: 1px solid #606060;
10   background-image: -moz-linear-gradient(top, #707070, #404040);
11   background-image: -webkit-gradient(linear, left top, left bottom, from(#707070), to(#404040));
12   background-color: #505050;
13   color: #DDDDDD;
14 }
15 a.button:hover
16 {
17   background-image: -moz-linear-gradient(top, #404040, #707070);
18   background-image: -webkit-gradient(linear, left top, left bottom, from(#404040), to(#707070));
19   background-color: #707070;
20 }

Erläuterungen

Zeilen 3-5

Wenn man mehrere Buttons nebeneinander verwendet, sieht es besser aus, wenn alle Buttons die gleiche Breite haben und der Text zentriert ist. Leider ist dies nicht ohne weiteres möglich:

Bei dem <a>-Element handelt es sich um ein inline-Element. Das Ändern der Breite ist bei inline-Elementen nicht möglich. Deshalb muss das <a>-Element als inline-block-Element umdefiniert werden. Dadurch bekommt man alle Möglichkeiten eines block-Elements an die Hand, mehrere Buttons können aber dennoch in einer Zeile dargestellt werden.

Zeilen 6-8

Hier werden die runden Ecken definiert, in 3 verschiedenen Versionen für verschiedenen Browser.

Zeilen 10-12

Hier wird der Farbverlauf definiert. Leider ist die Syntax von Firefox und Webkit komplett inkompatibel, deswegen sind 2 völlig verschiedene Versionen nötig. Um Benutzer von Browsern ohne Farbverlaufs-Unterstützung nicht im Regen stehen zu lassen, wird auch noch eine einfache Hintergrundfarbe als Fallback definiert.

Ergebnis

Um die Beispiele angucken zu können, ein aktueller Browser nötig (Firefox 3.6, Safari 4.0 oder Chrome 4.0)

Das ganze lässt sich auch beliebig abwandeln: