Vor einiger Zeit habe ich in diesem Artikel beschrieben, wie ihr einen feschen Button mit CSS-Code erstellt. Vielleicht sind euch die Buttons auf meiner Webseite schon aufgefallen. Auch diese basieren komplett auf CSS-Code. Wenn ihr mit der Maus über den Button fahrt, wird eine Grafik eingeblendet und der Text des Buttons verschiebt sich. Auf besonderen Wunsch hier ein kurzes Tutorial.

Der “Trick” besteht darin, den Hintergrund zu verschieben und mittels des CSS3-Befehls transition zu animieren. Die Grafik, die als Hintergrund eingebunden ist, ist zunächst außerhalb des sichtbaren Bereichs, bei :hover wird diese dann in den Button verschoben. Der Button-Text ist zunächst mittig angeordnet und wird bei :hover links oder rechts ausgerichtet, je nachdem an welcher Seite das Bild eingeblendet wird.

So sieht der fertige Button dann aus

Dies funktioniert mit dem Internet Explorer 9 nicht vollständig, da dieser weder Hintergrundfarbverläufe mit Hintergrundbild noch Animationen darstellen kann.

Seid ihr bereit? Los geht’s.

Button-Basics

Zunächst einige Grundeinstellungen für den Button.

.button a {
/* Beschriftung */
font-size:14px;
font-weight:bold;
color:#ffffff;
/* Breite festlegen je nach Textinhalt */
width:150px;
/* Innenabstand festlegen */
padding:12px;
/* Außenabstand festlegen */
margin:10px auto;
/* Button als Blockelement darstellen */
display:block;
}

Button Styling

Der Button soll natürlich rocken. Daher werden wir die Ecken abrunden

-moz-border-radius: 5px;
border-radius: 5px;

einen Schlagschatten hinzufügen

-webkit-box-shadow: 0 0 5px #999; /* Saf3.1+, Chrome */
-moz-box-shadow: 0 0 5px #999; /* FF3.5+ */
box-shadow: 0 0 5px #999;

sowie einen Farbverlauf für den Hintergrund festlegen.

background: #b5bdc8; /* Old browsers */
background: -moz-linear-gradient(top, #b5bdc8 0%, #828c95 0%, #28343b 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b5bdc8), color-stop(0%,#828c95), color-stop(100%,#28343b)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #b5bdc8 0%,#828c95 0%,#28343b 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #b5bdc8 0%,#828c95 0%,#28343b 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #b5bdc8 0%,#828c95 0%,#28343b 100%); /* IE10+ */
background: linear-gradient(top, #b5bdc8 0%,#828c95 0%,#28343b 100%); /* W3C */

Nun braucht ihr eine Bilddatei für die Hintergrundanimation. Wer keine Lust hat selbst Grafiken zu erstellen, der schaut mal hier vorbei. Dort gibt es ausreichend Free Icon Sets, die man prima dafür verwenden kann. Habt ihr das passende Bild gefunden, achtet darauf, dass ihr eine der Textgröße entsprechende Größe verwendet. Ich nehme hier ein Bild mit 24 x 24 Pixeln.

Den eben erstellen Code für den Hintergrundfarbverlauf passen wir wie folgt an:

background: url(bild.png) 150px 60px no-repeat,  #b5bdc8; /* Old browsers */
background: url(bild.png) 150px 60px no-repeat,  -moz-linear-gradient(top, #b5bdc8 0%, #828c95 0%, #28343b 100%); /* FF3.6+ */
background: url(bild.png) 150px 60px no-repeat,  -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b5bdc8), color-stop(0%,#828c95), color-stop(100%,#28343b)); /* Chrome,Safari4+ */
background: url(bild.png) 150px 60px no-repeat,  -webkit-linear-gradient(top, #b5bdc8 0%,#828c95 0%,#28343b 100%); /* Chrome10+,Safari5.1+ */
background: url(bild.png) 150px 60px no-repeat,  -o-linear-gradient(top, #b5bdc8 0%,#828c95 0%,#28343b 100%); /* Opera11.10+ */
background: url(bild.png) 150px 60px no-repeat,  -ms-linear-gradient(top, #b5bdc8 0%,#828c95 0%,#28343b 100%); /* IE10+ */
background: url(bild.png) 150px 60px no-repeat,  linear-gradient(top, #b5bdc8 0%,#828c95 0%,#28343b 100%); /* W3C */

Damit haben wir ein Hintergrundbild eingefügt und dieses entsprechend außerhalb des Buttons positioniert, nämlich 150 Pixel vom linken Rand des Buttons, also rechts vom Text, sowie 60 Pixel vom oberen Rand. So ist das Bild unter den Button verschoben und zunächst nicht sichtbar. Nicht sichtbar stimmt nicht so ganz, den wir werden das Bild unterhalb des Buttons sehen. Um das Bild “unsichtbar” zu machen, passen wir unseren bisherigen Code an:

overflow: hidden;

Dies bewirkt, dass außerhalb des Blockelements angeordnete Dinge, wie eben unser Bild, nicht sichtbar sind.

Wir werden gleich den Hover-Status definieren. Bevor wir dies tun, allerdings noch das wichtigste: die Animation. Wir wollen das Verschieben des Hintergrundes mit dem Befehl transition animieren. Dazu ergänzen wir folgendes:

-webkit-transition-property: background-position;
-webkit-transition-duration: 0.2s;
-moz-transition-property: background-position;
-moz-transition-duration: 0.2s;
-o-transition-property: background-position;
-o-transition-duration: 0.2s;
transition-property: background-position;
transition-duration: 0.2s;

Durch diesen Befehl wird die Position des Hintergrundbildes innerhalb einer Zeitspanne von 0,2 Sekunden verschoben. Würden wir diesen Befehl weglassen, hätten wir keine Animation, sprich das Hintergrundbild wäre bei :hover einfach da.

Viel Code für einen Button, oder? Wir sind aber noch nicht am Ende.

Hover für den Button

Nun gilt des den Hover-Status zu definieren. Wie bereits erwähnt, wollen wir

1. die Position des Hintergrundbildes ändern und
2. die Button-Beschriftung verschieben.

Das machen wir wie folgt:

.button a:hover {
background: url(bild.png) 150px 12px no-repeat,  #b5bdc8; /* Old browsers */
background: url(bild.png) 150px 12px no-repeat,  -moz-linear-gradient(top, #b5bdc8 0%, #828c95 0%, #28343b 100%); /* FF3.6+ */
background: url(bild.png) 150px 12px no-repeat,  -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b5bdc8), color-stop(0%,#828c95), color-stop(100%,#28343b)); /* Chrome,Safari4+ */
background: url(bild.png) 150px 12px no-repeat,  -webkit-linear-gradient(top, #b5bdc8 0%,#828c95 0%,#28343b 100%); /* Chrome10+,Safari5.1+ */
background: url(bild.png) 150px 12px no-repeat,  -o-linear-gradient(top, #b5bdc8 0%,#828c95 0%,#28343b 100%); /* Opera11.10+ */
background: url(bild.png) 150px 12px no-repeat,  -ms-linear-gradient(top, #b5bdc8 0%,#828c95 0%,#28343b 100%); /* IE10+ */
background: url(bild.png) 150px 12px no-repeat,  linear-gradient(top, #b5bdc8 0%,#828c95 0%,#28343b 100%); /* W3C */
text-align:left;
}

Der Text wird nun bei :hover linksbündig ausgerichtet und das Hintergrundbild in der Höhe von 60 Pixel auf 12 Pixel angehoben.

Nochmal ganz langsam

Der gesamte Code:

.button a {
background: url(bild.png) 150px 60px no-repeat,  #b5bdc8; /* Old browsers */
background: url(bild.png) 150px 60px no-repeat,  -moz-linear-gradient(top, #b5bdc8 0%, #828c95 0%, #28343b 100%); /* FF3.6+ */
background: url(bild.png) 150px 60px no-repeat,  -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b5bdc8), color-stop(0%,#828c95), color-stop(100%,#28343b)); /* Chrome,Safari4+ */
background: url(bild.png) 150px 60px no-repeat,  -webkit-linear-gradient(top, #b5bdc8 0%,#828c95 0%,#28343b 100%); /* Chrome10+,Safari5.1+ */
background: url(bild.png) 150px 60px no-repeat,  -o-linear-gradient(top, #b5bdc8 0%,#828c95 0%,#28343b 100%); /* Opera11.10+ */
background: url(bild.png) 150px 60px no-repeat,  -ms-linear-gradient(top, #b5bdc8 0%,#828c95 0%,#28343b 100%); /* IE10+ */
background: url(bild.png) 150px 60px no-repeat,  linear-gradient(top, #b5bdc8 0%,#828c95 0%,#28343b 100%); /* W3C */
font-size:14px;
font-weight:bold;
color:#ffffff;
width:150px;
padding:12px;
margin:10px auto;
overflow: hidden;
display:block;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 0 5px #999; /* Saf3.1+, Chrome */
-moz-box-shadow: 0 0 5px #999; /* FF3.5+ */
box-shadow: 0 0 5px #999;
-webkit-transition-property: background-position;
-webkit-transition-duration: 0.2s;
-moz-transition-property: background-position;
-moz-transition-duration: 0.2s;
-o-transition-property: background-position;
-o-transition-duration: 0.2s;
transition-property: background-position;
transition-duration: 0.2s;
}

.button a:hover {
background: url(bild.png) 150px 12px no-repeat,  #b5bdc8; /* Old browsers */
background: url(bild.png) 150px 12px no-repeat,  -moz-linear-gradient(top, #b5bdc8 0%, #828c95 0%, #28343b 100%); /* FF3.6+ */
background: url(bild.png) 150px 12px no-repeat,  -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b5bdc8), color-stop(0%,#828c95), color-stop(100%,#28343b)); /* Chrome,Safari4+ */
background: url(bild.png) 150px 12px no-repeat,  -webkit-linear-gradient(top, #b5bdc8 0%,#828c95 0%,#28343b 100%); /* Chrome10+,Safari5.1+ */
background: url(bild.png) 150px 12px no-repeat,  -o-linear-gradient(top, #b5bdc8 0%,#828c95 0%,#28343b 100%); /* Opera11.10+ */
background: url(bild.png) 150px 12px no-repeat,  -ms-linear-gradient(top, #b5bdc8 0%,#828c95 0%,#28343b 100%); /* IE10+ */
background: url(bild.png) 150px 12px no-repeat,  linear-gradient(top, #b5bdc8 0%,#828c95 0%,#28343b 100%); /* W3C */
text-align:left;
}

In die Webseite einbauen

Wie kommt der Button jetzt in unsere Webseite? Wir binden den Button als Div-Container ein:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<title>Ein animierter Button mit CSS3</title>
</head>
<body>
...
<div class="button"><a href="" target="_blank">Don't push me</a></div>
...
</body>
</html>

Alles klar?