css3buttons0.jpg" alt="" />

Viele neuere Browser unterstützen schon Funktionen, die mit CSS3 eingeführt wurden. Die schönsten und wichtigsten werde ich in diesem Artikel vorstellen und zeigen, wie man sie anwenden kann. Ich hoffe, dass dieser Artikel euch zum Experimentieren anregt, denn je mehr mit neuen Technologien experimentiert wird, desto besser werden die Ergebnisse.

Als Basis für den Button dient folgender HTML-Code:

<span class="button">
	Absenden
</span>

Wir werden die Klasse „button“ benutzen, um den Button zu stylen. Eine Anmerkung noch: Natürlich kann man auch Links in Buttons umwandeln, indem man ihnen die Klasse „button“ zuweist. Dann sollte man aber auch darauf achten, die Schriftfarbe für die Pseudoklassen hover, active, link und visited zu definieren.

Bisher sieht man noch nichts von dem Button außer den puren Text. Die Puristen unter euch können also hier aufhören, euer Button ist fertig. ;-) Für alle anderen werden wir jetzt anfangen, dem Button ein neues Gewand zu geben.

Als erstes definieren wir hier eine Schriftart, in diesem Fall Tahoma. Außerdem geben wir dem Button ein Padding von 10 Pixeln. Wichtig ist auch, dass wir mit der Eigenschaft „cursor“ definieren, welcher Mauszeiger beim „Hovern“ über dem Button gezeigt werden soll. Der „Pointer“ zeigt dem Nutzer, dass hier geklickt werden soll:

.button
{
	font-family: Tahoma;
	cursor: pointer;

	padding: 10px;
}

Jetzt definieren wir einen Rahmen für den Button. Neu in CSS3: die Eigenschaft boder-radius. Mit ihr kann man die Ecken abrufen. Mithilfe der Präfixe „-moz-“ und „-webkit-“ definieren wir die Eigenschaft auch in Firefox und Webkit-basierten Browsern. Leider wird diese Eigenschaft noch nicht von allen Browsern unterstützt.

	border: 1px solid #cacaca;
	-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;

Hier haben wir also schon die erste Grafik gespart, da wir für runde Ecken keine Grafiken mehr brauchen.

Als Nächstes wollen wir dem Button einen Hintergrund geben. Bisher musste man für Farbverläufe immer eine Grafik anlegen, aber mit CSS3 können wir hier noch eine Grafik sparen.

Ich generiere meine Farbverläufe mit dem CSS3 Gradient Generator von Damian Galarza. Mehr über die Bedienung des Tools findet ihr in meinem Artikel „CSS3-Suchfeld – Verläufe und runde Ecken“ oder auf der Internetseite des Generators. Im Grunde ist die Bedienung ganz einfach. Es müssen nur die Farben, die Position der Farben und die Richtung des Verlaufes festgelegt werden.

	background: #dedede;
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0.09, rgb(199,199,199)),
		color-stop(0.89, rgb(222,222,222))
	);
	background-image: -moz-linear-gradient(
		center bottom,
		rgb(199,199,199) 9%,
		rgb(222,222,222) 89%
	);

Hier ist also der Code, den ich generiert habe. Noch ein kleiner Tipp: Wenn ihr noch keine Idee habt, welche Farben ihr benutzen sollt, klickt einfach im Gradient Generator auf „Generate Random Gradient“. Manchmal liefert der Generator einem damit echt interessante Ideen.

Ich habe zusätzlich vor der Definition der Verläufe eine normale Hintergrundfarbe definiert. Falls ein Browser keine Verläufe unterstützt, wird diese Farbe verwendet.

Hier nun also unser Ergebnis:

Aber etwas fehlt noch: der Hover-Style. Der Nutzer soll doch wissen, dass er sich gerade über einem Button befindet.

.button:hover
{
	border: 1px solid #afafaf;
}

Beim Hover soll also einfach nur der Rahmen etwas dunkler werden.

Wir haben jetzt also einen Button mit CSS3 erstellt. Aber natürlich will ich noch mehr neue Eigenschaften vorstellen, deshalb folgen jetzt noch einige Beispielbuttons.

Ich habe den Button jetzt noch leicht variiert, dabei bin ich so vorgegangen, wie schon oben beschrieben. Hier kommt also der aktuelle CSS-Code:

.button
{
	cursor: pointer;

	font-family: Tahoma;
	color: #fafafa;

	padding: 12px 15px;

	-moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;

	background: #96642b;
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0.23, rgb(115,71,17)),
		color-stop(0.39, rgb(150,100,43))
	);
	background-image: -moz-linear-gradient(
		center bottom,
		rgb(115,71,17) 23%,
		rgb(150,100,43) 39%
	);
}

Unser Button sieht aktuell so aus:

Auch Schatten musste man bisher mit Photoshop erstellen, aber CSS3 bietet auch hierfür eine Eigenschaft. Mit box-shadow können leicht ein oder mehrere Schlagschatten definiert werden.

	box-shadow: inset 3px 3px 6px rgba(255, 255, 255, 0.7), inset -3px -3px 6px rgba(0, 0, 0, 0.5);

Hier definiere ich also gleich zwei Schlagschatten. Mit dem Parameter „inset“ wirken die Schatten nicht nach außen, sondern nach innen, ähnlich wie „Inner Shadows“ in Photoshop. Außerdem verwende ich für die Farbwerte die in CSS3 neue Form rgba(). Dafür gibt man einfach nacheinander die Zahlenwerte für Rot, Grün, Blau und Alphatransparenz an. Wer auf die Transparenz verzichten kann, kann auch rgb() benutzen und den Alphawert weglassen.

Weiterhin ist zu beachten, dass wieder mit -moz- und -webkit- gearbeitet werden muss.

Jedenfalls haben wir hier zwei Schatten definiert, wodurch der Button jetzt so aussieht:

Wie man sieht, wirkt es, als würde der Button von oben links angestrahlt werden. Natürlich kann man den Button jetzt auch noch selbst einen Schatten werfen lassen, indem man einfach zu box-shadow noch einen Schatten hinzufügt:

Mit CSS kann man selbst Text einen oder mehrere Schatten verleihen. Das ist zwar nicht neu in CSS3, aber trotzdem toll. Die Syntax ist genau wie bei box-shadow, nur dass die Eigenschaft text-shadow heißt und hier keine Präfixe verwendet werden müssen.

.button
{
	cursor: pointer;

	font-family: "ArmWrestlerBold";
	color: #4a301e;
	font-size: 1.1em;
	letter-spacing: 1px;
	text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5), -1px -1px 1px rgba(0, 0, 0, 1);

	padding: 1em;

	-moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;

	background: #96642b;
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0.23, rgb(115,71,17)),
		color-stop(0.39, rgb(150,100,43))
	);
	background-image: -moz-linear-gradient(
		center bottom,
		rgb(115,71,17) 23%,
		rgb(150,100,43) 39%
	);

	-moz-box-shadow: inset 3px 3px 6px rgba(255, 255, 255, 0.7), inset -3px -3px 6px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: inset 3px 3px 6px rgba(255, 255, 255, 0.7), inset -3px -3px 6px rgba(0, 0, 0, 0.5);
	box-shadow: inset 3px 3px 6px rgba(255, 255, 255, 0.7), inset -3px -3px 6px rgba(0, 0, 0, 0.5);
}

Wie man sehen kann, habe ich auch hier wieder zwei Schatten definiert, sodass der Text wie eingestanzt wirkt.

Ich habe noch ein wenig mit CSS rumgespielt, die Ergebnisse will ich euch natürlich nicht vorenthalten. Ihr findet hier die erstellten Buttons und den CSS-Code:

.button
{
	cursor: pointer;

	font-family: "ArmWrestlerBold";
	font-size: 1.5em;
	color: #196a96;
	letter-spacing: 1px;

	text-shadow: -1px -1px 1px rgba(0, 0, 0, 1), 1px 1px 1px rgba(255, 255, 255, 1);

	padding: 10px 15px;

	-moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px;

	background: rgb(14,147,208);
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0.17, rgb(14,147,208)),
		color-stop(0.59, rgb(41,177,250))
	);
	background-image: -moz-linear-gradient(
		center bottom,
		rgb(14,147,208) 17%,
		rgb(41,177,250) 59%
	);

	-moz-box-shadow: 1px 1px 0px rgba(0, 0, 0, 1), -1px -1px 0px rgba(255, 255, 255, 1);
	-webkit-box-shadow: 1px 1px 0px rgba(0, 0, 0, 1), -1px -1px 0px rgba(255, 255, 255, 1);
	box-shadow: 1px 1px 0px rgba(0, 0, 0, 1), -1px -1px 0px rgba(255, 255, 255, 1);
}

.button
{
	cursor: pointer;

	font-family: Verdana;
	font-weight: bold;
	color: #212121;

	text-shadow: 1px 1px 1px rgba(255, 255, 255, 1);

	padding: 10px 15px;

	border: 2px solid #ffffff;
	-moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px;

	background: rgb(224,224,224);
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0.49, rgb(224,224,224)),
		color-stop(0.5, rgb(237,237,237))
	);
	background-image: -moz-linear-gradient(
		center bottom,
		rgb(224,224,224) 49%,
		rgb(237,237,237) 50%
	);

	-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 1);
	-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 1);
	box-shadow: 0px 0px 3px rgba(0, 0, 0, 1);
}

Wie findet ihr die neuen Eigenschaften in CSS3? Werdet ihr auch in Zukunft Photoshop für Buttons bemühen oder lieber doch mit border-radius, box-shadow und text-shadow arbeiten? Teilt eure Meinung in den Kommentaren!

• CSS3 als Photoshop-Ersatz? – kulturbanause.de
• CSS3-Eigenschaften nutzen? – miradlo.net
• CSS3 im Detail: Background Gradients – normansblog.de
• CSS3-Suchfeld – advitum.de
• HTML5 und CSS3 heute schon nutzen: Hilfskonstruktionen für Helden – t3n Magazin
• Technologien, die das Web verändern werden – t3n Magazin
• Dynamische Navigation – mit CSS3 – t3n Howto
• Mit CSS automatisch Dateityp-Icons neben Download-Links anzeigen – t3n Howto

Autor dieses Gastbeitrages ist Lars Ebert. Er ist ein junger Webdesigner & Programmierer aus Iserlohn und bloggt auf Advitum.de über CSS, PHP und Co.