Anzeige
Anzeige
UX & Design
Artikel merken

Anleitung: CSS3-Buttons ohne Grafiken erstellen

CSS3 macht in vielen Bereichen Bilder einfach unnötig. Für viele einfache Dinge muss man Photoshop gar nicht mehr öffnen. In diesem Artikel will ich zeigen, wie auch komplexe Buttons ohne Photoshop oder Grafiken nur mit CSS erstellt werden können.

Von Lars Ebert
6 Min. Lesezeit
Anzeige
Anzeige

css3buttons0.jpg" alt="" />

Anzeige
Anzeige

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.

Ein schlichter Button ohne viel Schnick-Schnack

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

Anzeige
Anzeige
<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.

Anzeige
Anzeige

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.

Schritt 1: Schriftart

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:

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

	padding: 10px;
}

Schritt 2: Rahmen

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.

Schritt 3: Hintergrund

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

Hier nun also unser Ergebnis:

Schritt 4: Hover-Style

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

Anzeige
Anzeige
.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.

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:

Anzeige
Anzeige
.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.

Anzeige
Anzeige
	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.

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
14 Kommentare
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

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
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
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
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
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
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

@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
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
Stephan Bauer

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

Antworten
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
Abbrechen

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

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

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

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

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige