CSS3 Buttons

Tutorial: CSS3 push-down Buttons

A note to non german speakers: I’ve translated this post. You can find the english version here: Tutorial: CSS3 push-down buttons (english version)

Wir erstellen uns heute einen Button, für dessen Aussehen wir CSS3 verwenden. “CSS3″ deshalb, weil wir Abrundungen, Verläufe und Schatten verwenden, die zu dem typischen Button-Look führen. Für ältere Browser haben wir Fallbacks auf Vollfarben, keine Verwendung von Schatten und verzichten auch auf “runde Ecken”.

CSS3 Button in Firefox und IE7

Schritt 1: Das Markup

Beginnen wir mit dem HTML:

<!doctype html>  

<html>
<head>
  <meta charset="utf-8">

  <title>Tutorial: CSS3 push-down Buttons</title>

  <link rel="stylesheet" href="css/style.css?v=2">
</head>

<body>

  <div id="container">
	<a href="#" class="button">Login ►</a>
	<a href="#" class="button">Register ♥</a>
  </div>

</body>
</html>

Schritt 2: Der Hintergrund

Folgende Zeilen CSS befinden sich in der Stylesheet-Datei style.css.

Beginnen wir erst einmal damit, den Hintergrund mit ein bisschen Farbe zu versehen:

html { height: 100%; }

body {
	height: 100%;
	background-image: -webkit-gradient(
						linear,  left bottom,  left top,
						color-stop(0, rgb(247,253,255)),
						color-stop(0.65, rgb(221,243,252))  );
	background-image: -moz-linear-gradient(
						center bottom,
						rgb(247,253,255) 0%,
						rgb(221,243,252) 65%  );
	font-family: Arial, sans-serif;
}

#container {
	width: 450px;
	height: 200px;
	margin:150px auto;
}

Was haben wir hier gemacht:

html { height: 100%; }

Damit sich der Verlauf über den gesamten Hintergrund zieht, erweitern wir die Seite auf die Größe des Browserfensters.

body {
	height: 100%;
	background-image: -webkit-gradient(
						linear,  left bottom,  left top,
						color-stop(0, rgb(247,253,255)),
						color-stop(0.65, rgb(221,243,252))  );
	background-image: -moz-linear-gradient(
						center bottom,
						rgb(247,253,255) 0%,
						rgb(221,243,252) 65%  );
	font-family: Arial, sans-serif;
}

Ebenso wird der body der Seite auf 100% erweitert. Innerhalb des Attributes background-image weisen wir mit der CSS3-Eigenschaft linear-gradient einen Verlauf zu. background-image verwenden wir zweimal, um die Anweisungen für Firefox und Webkit-Browser bereitzustellen (siehe “-webkit-” und “-moz-“, die sogenannten “vendor-prefixes”).

Die Syntax für linear-gradients in Webkit-Browsern und liner-gradients im Firefox findet man in den entsprechenden Entwicklerdokumentationen der Browser.

Schritt 3: Der Button

Unser Button besteht aus einem gestylten Hyperlink, dem wir die Klasse button zugewiesen haben. So brauchen wir den Style nur einmal angeben. Alle Anweisungen in der CSS-Datei werden dann für jedes Objekt mit der Klasse button übernommen.

.button {
	/* Damit unser Button, per "top" verschoben werden kann */

	position: relative;
	display: inline-block;

	/* Der Button soll mindestens 150px breit sein. Auch werden hier
	die Innen- und Aussenabstände festgelegt */

	min-width: 150px;
	padding: 10px 15px;
	margin: 0px 10px;

	/* Unser fallback, sollte der Browser keine linear-gradients unterstützen */

	background-color: #3E9ED6;
	background-image: -webkit-gradient(
		linear,
		left top,
		left bottom,
		color-stop(0, rgb(112,181,242)),
		color-stop(0.49, rgb(84,164,238)),
		color-stop(0.5, rgb(54,144,240)),
		color-stop(1, rgb(26,97,219))
	);
	background-image: -moz-linear-gradient(
		center top,
		rgb(112,181,242) 0%,
		rgb(84,164,238) 49%,
		rgb(54,144,240) 50%,
		rgb(26,97,219) 100%
	);

	/* Anweisungen füt das Aussehen des Textes */

	color: #fff;
	font-weight: bold;
	font-size: 24px;
	text-decoration: none;
	text-align: center;
	line-height: 1;
	/* Wir definieren einen Schatten für den Text, den wir um 1px nach oben verschieben
	und aus einem 50% Schwarz besteht. Das gibt den Anschein, als wäre der Text in den
	Button eingraviert */
	text-shadow: 0px -1px 0px rgba(0,0,0,0.5);

	/* Hier wird der Rahmen für unseren Button definiert und auch die abgerundeten Ecken
	(auch hier verwenden wir wieder die "vendor-prefixes" */

	border: 1px solid;
	border-color: #2f71a3 #265a82 #1e4766 #265a82;
	border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;

	/* Diese CSS3-Eigenschaft ist besonders spannend:
	Wie man hier sehen kann, können wir mehr als nur einen Schatten definieren.
	Insgesamt sind es 6 Schatten, die unserem Button das Aussehen verleihen.
	(2 innere Schatten, die einen weissen Schein in den Button legen,
	 3 Schatten, die die visuelle, 3-dimensionale Höhe des Buttons bestimmen (immer in 2px Abständen)
	 und einen Schatten, der, den eigentlichen Schattenwurf simuliert.)
	Mit dem Wort "inset" können wir den Schatten in das Innere der Box verlegen.*/

	box-shadow: 		inset 0px -4px 5px rgba(255,255,255,0.2),
						inset 0px 1px 5px rgba(255,255,255,0.2),
						/**/
						0px 2px 0px #1e4766,
						0px 4px 0px #1e4766,
						0px 6px 0px #1e4766,
						/**/
						0px 8px 5px rgba(0,0,0,0.5);

	-moz-box-shadow: 	inset 0px -4px 5px rgba(255,255,255,0.2),
						inset 0px 1px 5px rgba(255,255,255,0.2),
						/**/
						0px 2px 0px #1e4766,
						0px 4px 0px #1e4766,
						0px 6px 0px #1e4766,
						/**/
						0px 8px 5px rgba(0,0,0,0.5);

	-webkit-box-shadow: inset 0px -4px 5px rgba(255,255,255,0.2),
						inset 0px 1px 5px rgba(255,255,255,0.2),
						/**/
						0px 2px 0px #1e4766,
						0px 4px 0px #1e4766,
						0px 6px 0px #1e4766,
						/**/
						0px 8px 5px rgba(0,0,0,0.5);
}

Schritt 4: Benutzerinteraktion

Nun fehlen nur die Styles für den Zeitpunkt, in dem ein Benutzer mit der Maus über den Button fährt und wenn der Benutzer den Button drückt.

Beim hover soll sich der Button farblich ändern und z.B. etwas heller werden. Solche Effekte wichtig für eine gute Benutzeroberfläche, die gemäß der Interaktion mit dem Benutzer die entsprechende, visuelle Rückmeldung gibt.

Damit der Button heller wird, verändern wir die Hintergrundfarbe bzw. den Verlauf innerhalb des Buttons. Alles Andere kann die selben Werte behalten. Deswegen überschreiben wir mit der Pseudo-Klasse :hover nur die Werte für die Hintergrundfarben.

.button:hover {
	background-color: #8AC5FD;

	background-image: -webkit-gradient(
		linear,
		left top,
		left bottom,
		color-stop(0, rgb(134,193,253)),
		color-stop(0.49, rgb(153,213,255)),
		color-stop(0.5, rgb(130,194,253)),
		color-stop(1, rgb(108,170,229))
	);
	background-image: -moz-linear-gradient(
		center top,
		rgb(134,193,253) 0%,
		rgb(153,213,255) 49%,
		rgb(130,194,253) 50%,
		rgb(108,170,229) 100%
	);
}

Nun fehlt noch die Anweisung für das Drücken des Buttons. Damit die Illusion des Herunterdrückens entsteht, muss sich der Button visuell verkleinern und nach unten verschieben. Das erreichen wir, indem zwei der drei Anweisungen für die Schatten, die die visuelle, 3-dimensionale Höhe des Buttons vorgeben, gelöscht werden und der Button um die entsprechende Anzahl Pixel nach unten verschoben wird.

Wir überschreiben mit der Pseudo-Klasse :active nur die Werte für die Schatten (box-shadow) und fügen noch die Verschiebung hinzu:

.button:active {
	top: 4px;
	box-shadow: 		inset 0px 4px 5px rgba(255,255,255,0.4),
						inset 0px -1px 5px rgba(255,255,255,0.2),
						/**/
						0px 2px 0px #1e4766,
						/**/
						0px 4px 5px rgba(0,0,0,0.5);

	-moz-box-shadow: 	inset 0px 4px 5px rgba(255,255,255,0.4),
						inset 0px -1px 5px rgba(255,255,255,0.2),
						/**/
						0px 2px 0px #1e4766,
						/**/
						0px 4px 5px rgba(0,0,0,0.5);

	-webkit-box-shadow: inset 0px 4px 5px rgba(255,255,255,0.4),
						inset 0px -1px 5px rgba(255,255,255,0.2),
						/**/
						0px 2px 0px #1e4766,
						/**/
						0px 4px 5px rgba(0,0,0,0.5);
}

Damit wäre der Button auch schon fertig. Glücklicherweise verwenden wir Klassen, so das wir diesen Riesenbrocken Styleanweisungen nur einmal angeben brauchen.

Das Schöne an CSS3 ist, dass wir auf den Gebrauch von Bildern und Hintergrundgrafiken verzichten können, da wir mit ein paar Anweisungen, wunderschöne Buttons bauen können, die vom Browser berechnet werden. So sparen wir überflüssige Server-Requests, beschleunigen die Webseiten und verbessern das Erlebnis, das die Besucher unserer Webseiten haben.