Grafische Buttons mit CSS

In diesem Tutorial möchte ich euch zeigen, wie ihr euch mit CSS grafische Buttons für eure Website gestalten könnt. Erstellen werden wir uns Schritt für Schritt folgenden Button:

Der HTML-Code

Per HTML verweisen wir auf eine Klasse mit dem namen „button“, die wir uns gleich erstellen werden. Der Code dafür sieht wie folgt aus:

„Button“ beschreibt hier den Text, der später im Button erscheinen soll. Natürlich kann dies auch in einem p-Tag geschehen. Dies ist jedem selbst überlassen.

Der CSS-Code

Per HTML haben wir soeben auf die Klasse „button“ verwiesen. Diese werden wir nun erstellen und anpassen. Beginnen wir erstmal mit den Grundinformationen wie Größe und Farbe der Buttons.

.button {
   max-width:100px;
   padding:10px 20px;
   background: #1e5799;
   background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 38%, #7db9e8 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(38%,#2989d8), color-stop(100%,#7db9e8));
   background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 38%,#7db9e8 100%);
   background: -o-linear-gradient(top, #1e5799 0%,#2989d8 38%,#7db9e8 100%);
   background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 38%,#7db9e8 100%);
   background: linear-gradient(to bottom, #1e5799 0%,#2989d8 38%,#7db9e8 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );
}

Zwischenergebnis

Kurze Erklärung

Was haben wir getan? Mit „max-width“ bestimmen wir die maximale Breite des Button. Den Innenabstand haben wir mit „padding:10px 20px“ angegeben. (10px oben und unten, 20px links und rechts). Mit „background“ wird die Hintergrundfarbe definiert. Hier habe ich mich für einen Verlauf entschieden. Diesen könnt ihr übrigens auf folgender Website mittels einer photoshopähnlichen Oberfläche generieren.

Natürlich können hier auch andere Werte angegeben werden. Wenn ihr beispielsweise keine Maximalbreite für die Buttons benötigt, lässt ihr „max-width“ einfach weg. Daraufhin rechnet sich der Browser automatisch aus, wieviel Platz der Button für den Text in der Breite benötigt.

Feinschliff

Nun möchten wir, dass der Text im Button mittig gesetzt wird und in weiss erscheint. Außerdem verschönern wir das Gesamtbild mit Licht- und Schatteneffekten und abgerundeten Ecken. Wir verlängern unseren CSS Code um folgende Zeilen:

.button {
   max-width:100px;
   padding:10px 20px;
   background: #1e5799;
   background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 38%, #7db9e8 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(38%,#2989d8), color-stop(100%,#7db9e8));
   background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 38%,#7db9e8 100%);
   background: -o-linear-gradient(top, #1e5799 0%,#2989d8 38%,#7db9e8 100%);
   background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 38%,#7db9e8 100%);
   background: linear-gradient(to bottom, #1e5799 0%,#2989d8 38%,#7db9e8 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );
   color:#fff;
   text-align:center;
   -moz-border-radius:10px;
   -webkit-border-radius:10px;
   border-radius:10px;
   -moz-box-shadow:0px 1px 2px rgba(000,000,000,0.5),inset 0px 0px 2px rgba(255,255,255,0.9);
   -webkit-box-shadow:0px 1px 2px rgba(000,000,000,0.5),inset 0px 0px 2px rgba(255,255,255,0.9);
   box-shadow:0px 1px 2px rgba(000,000,000,0.5),inset 0px 0px 2px rgba(255,255,255,0.9);
   cursor:pointer;
}

Endergebnis

Kurze Erklärung

Mit „color“ haben wir die Farbe des Textes verändert. „Text-align:center“ platziert den Text in die Mitte des Buttons. Mit „border-radius“ haben wir für den Button abgerundete Ecken in einem Radius von jeweils 10 Pixel bestimmt. „Box-shadow“ beschreibt den Schatten, den wir der „Box“ zugewiesen haben. Hier habe ich mit inset zusätzlich einen inneren zugeteilt. Der Befehl „Cursor“ bewirkt, dass sich der Mauscursor ändert, sobald man den Button hovert.

Fertig!

So einfach kann es sein, sich schöne grafische Buttons mit CSS zu erstellen.