Boah, ist das aufregend: Buttons mit CSS3. Okay, vielleicht nicht aufregend aber doch für den ein oder anderen interessant. Den mit CSS3 gibt es geniale Möglichkeiten schicke Buttons mit reinem Code zu erzeugen und gänzlich auf Bilddateien oder Javascript zu verzichten. Und je weniger Bilddateien geladen oder Scripte ausgeführt werden müssen, desto geringer ist die Ladezeit eurer Webseite. Ist doch klasse, oder?

Buttons konnte man natürlich auch schon vor CSS3 mit entsprechendem Code erstellen. Mit CSS3 macht es aber definitiv mehr Spass und auch das Ergebnis ist ansehnlicher. So gibt es unzählige Möglichkeiten dem Button mittels

• box-shadow,
• text-shadow,
• background-gradients oder
• border-radius

den letzten Schliff zu geben.

Ich will an einem Beispiel mal die Entstehung eines CSS-Buttons aufzeigen.

Beginnen wir mit den Basics:

.button {
/* Schrift */
color:#ffffff;
font-family:Verdana, Arial;
font-size:14px;
font-weight:bold;
/* Breite festlegen */
width:150px;
/* Außenabstand definieren */
margin:20px auto;
/* Innenabstand definieren */
padding:10px;

Ein fescher Button hat natürlich abgerundete Ecken

/* Runde Ecken */
-webkit-border-radius:5px; /* Saf3.1+, Chrome */
-moz-border-radius:5px; /* FF3.5+ */
border-radius:5px;

und als Hintergrund einen Farbverlauf

/* Hintergrundfarbverlauf */
background: #568bbc; /* Old browsers */
background: -moz-linear-gradient(top, #568bbc 0%, #39648c 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#568bbc), color-stop(100%,#39648c)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #568bbc 0%,#39648c 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #568bbc 0%,#39648c 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #568bbc 0%,#39648c 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#568bbc', endColorstr='#39648c',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #568bbc 0%,#39648c 100%); /* W3C */

Das Zwischenergebnis

Nun wollen wir dem Text noch einen Schatten geben

/* Text-Schatten */
text-shadow:0 1px 1px #333;

Auch der Button selber soll einen dezenten Schatten erhalten

/* Box-Schatten */
-moz-box-shadow:0 1px 3px #111; /* FF3.5+ */
-webkit-box-shadow:0 1px 3px #111; /* Saf3.1+, Chrome */
box-shadow:0 1px 3px #111;
}

Und so sieht er dann aus, unser Button

Der bisherige Code nochmal zusammengefasst:

.button {
/* Schrift */
color:#ffffff;
font-family:Verdana, Arial;
font-size:14px;
/* Breite festlegen */
width:150px;
/* Außenabstand definieren */
margin:20px auto;
/* Innenabstand definieren */
padding:10px;
/* Runde Ecken */
-webkit-border-radius:5px; /* Saf3.1+, Chrome */
-moz-border-radius:5px; /* FF3.5+ */
border-radius:5px;
/* Hintergrundfarbverlauf */
background: #568bbc; /* Old browsers */
background: -moz-linear-gradient(top, #568bbc 0%, #39648c 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#568bbc), color-stop(100%,#39648c)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #568bbc 0%,#39648c 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #568bbc 0%,#39648c 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #568bbc 0%,#39648c 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#568bbc', endColorstr='#39648c',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #568bbc 0%,#39648c 100%); /* W3C */
/* Text-Schatten */
text-shadow:0 1px 1px #333;
/* Box-Schatten */
-moz-box-shadow:0 1px 3px #111; /* FF3.5+ */
-webkit-box-shadow:0 1px 3px #111; /* Saf3.1+, Chrome */
box-shadow:0 1px 3px #111;
}

Als i-Tüpfelchen wollen wir nach dem Klick auf den Button noch ein optisches Feedback geben. Das machen wir indem wir den Schatten bei :active vergrößern:

.button:active {
/* Box-Schatten */
-moz-box-shadow:0 2px 6px #000;  /* FF3.5+ */
-webkit-box-shadow:0 2px 6px #000;   /* Saf3.1+, Chrome */
box-shadow:0 2px 6px #000;
}

Wenn die Maus über den Button fährt wollen wir nun als letzten Schritt noch ein wenig die Farben verändern. Das machen wir bei :hover:

.button:hover {
/* Hintergrundfarbverlauf */
background: #284c6d; /* Old browsers */
background: -moz-linear-gradient(top, #284c6d 0%, #497cab 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#284c6d), color-stop(100%,#497cab)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #284c6d 0%,#497cab 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #284c6d 0%,#497cab 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #284c6d 0%,#497cab 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#284c6d', endColorstr='#497cab',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #284c6d 0%,#497cab 100%); /* W3C */
}

Ihr wollt noch weitere Beispiele? Dann schaut euch die Demo-Seite an. Das obere Beispiel findet ihr dort ebenfalls.

Habt ihr eigene Buttons kreiert, postet den Code doch in die Kommentare. Ich werde diese dann in die Demoseite aufnehmen.

Du suchst noch mehr zum Thema CSS3? Dann wirf einen Blick auf die Übersichtsseite: