Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

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.

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:

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

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:

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

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:

Schritt 4: Hover-Style

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.

Finde einen Job, den du liebst

11 Reaktionen
bandmerch
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!

Stephan Bauer
Stephan Bauer

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

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

Lars Ebert
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.

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

Lars Ebert
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.

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

Tobi
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 :-)

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.

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

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Hinweis

Du hast gerade auf einen Provisions-Link geklickt und wirst in Sekunden weitergeleitet.

Bei Bestellung auf der Zielseite erhalten wir eine kleine Provision – dir entstehen keine Mehrkosten.


Weiter zum Angebot