Entwicklung & Design

Anleitung: CSS3-Buttons ohne Grafiken erstellen

Seite 2 / 2

Variationen des CSS3-Buttons

1. Tricksen mit Schlagschatten

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:

2. Schatten für die Schrift

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.

3. Weitere Experimente

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);
}

Was sagt ihr?

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!

Links zum Thema

Über den Autor

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

Startseite
  • Seite:
  • 1
  • 2

Bitte beachte unsere Community-Richtlinien

11 Reaktionen
bandmerch

Hallo,
ich wollte hier auch noch mal DANKE sagen!
Durch diese Anleitung habe ich schon ne Menge Zeit und Nerven gespart. Auf diese Weise habe ich schon ne Menge Buttons erstellt unter anderem auch für meine Homepage auf der wir selber Buttons herstellen! Das geht allerdings nicht ganz so leicht, sondern benötigt noch Muskelkraft :)
Gemeint sind unsere Ansteckbuttons. Zu sehen auf band-merch.de.
So, genug abgeschweift...
Diese CSS3-Buttons sind auch wirklich gut!

Antworten
Stephan Bauer

Wer meint, abgerundete Ecken usw. geht nicht mit dem IE, der sollte sich mal diese Seite anschauen:

Antworten
Ralf Hortt

@fonsy: Du hast verkannt, dass der Blog sich speziell um CSS3 kümmert. Erst mit IE9 wird hier das Thema endlich interessant. Da man endlich auf konformität und Standards setzt. Tut mir leid, dass ich in meinem Blog nicht auf IE6 anpasse, Software die inzwischen über 10 Jahre alt ist.
imgless.com

Antworten
Lars Ebert

@Tobi: Natürlich. Man muss CSS3 (noch) leider sehr vorsichtig gebrauchen. Aber kleine Details wie runde Ecken machen ja keinen so großen Unterschied, wenn sie fehlen, das lässt sich dann noch verkraften.

Antworten
Tobi

@Lars: Da hast du schon recht. Allerdings ist es schwierig in einem Kundenprojekt schon diese Standards zu nutzen, ohne dass es man optische Unterschiede in gängigen (!) Browsern erkennt. Das lassen nur wenige Kunden durchgehen. Zumal es bei Buttons, wie zum Beispiel in einem Shop, nicht gerade irrelevant ist, dass diese auch so aussehen, wie vorgegeben.
Für private Basteleien und das ein oder andere kleinere Projekt ist es sicherlich gut, die neuesten Standards zu verwenden und damit den Browserentwicklern etwas Druck zu machen. In größeren Projekten ist das leider bislang nur sehr eingeschränkt möglich und bedeutet meist die angesprochenen Hacks & Basteleien. Wenn nur jeder von IE oder ähnlichem einfach auf Firefox/Chrome/Safari umsteigen könnte, wäre unsere Welt ein Stückchen besser ;-)

Antworten
Lars Ebert

@fonsy: Ich vertrete die Auffassung, dass man schon jetzt neueste Techniken benutzen muss, um den Browserentwicklern ein wenig Feuer unterm Hintern zu machen ;) Aber zu meinen Buttons ist zu sagen, dass sie ja durchaus auch ohne CSS3 funktionieren, man muss dann nur auf die runden Ecken und die Verläufe verzichten.

Antworten
fonsy

Wahnsinn, da schreibt einer in seinen Blog zum Thema CSS3 Unterstützung von Browsern: "We don’t talk about IE here…"
What do you talk about instead ? Hacks, Workarounds und Basteleien ?
Weniger ist manchmal mehr, recht viele Spezialisten sollten sich einmal mit den CSS1 und 2 Spezifikationen vertraut machen und wie man ein Design auf "allen" Browsern gleich umsetzt. Ohne ellenlange CSS und JS Hacks.

Antworten
Tobi

Genau das sehe ich derzeit noch als Problem. Die Ansicht für Browser, die kein CSS3 unterstützen muss ja trotz allem gesichert sein. Daher kommt man bisher um einen Einsatz von Grafiken nicht 100%ig herum - leider... Aber experimentieren damit macht auf jeden Fall Spaß und es ist genial, was alles durch HTML5/CSS3 möglich ist.
Hoffentlich bekommen es jetzt die Browserentwickler möglichst schnell hin, dass die "Masse" auch CSS3/HTML5 konforme Browser nutzen. Also immer schön den Browser updaten und alle (Entwickler) sind glücklich :-)

Antworten
Ralf Hortt

Ich hab sogar hierfür extra ein eigenes Projekt gestartet
http://imgless.com/

ist noch im Aufbau und läuft auf den neusten Browsern.

Antworten
Philipp

Schöner Artikel ;-)

Schon jetzt versuche ich möglichst viel CSS3 zu benutzen. Es werden keine Grafiken (bis auf Social Media) mehr benötigt. CSS3 Animationen können Teilweise Javascript (Frameworks) ersetzten.

Freu mich wenn alle Browser endlich CSS3 / HTML5 komform sind.

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Hey du! Schön, dass du hier bist. 😊

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team bestehend aus 65 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung