Schönes modernes Button-Design mit CSS3: Farbverlauf und Schatten richtig nutzen

Sei es nun der klassische "Absenden"-Button oder der "Abonnieren"-Button. Auf einen gut gestylten Button klickt der Nutzer lieber, also auf einen Standard-Style-Button oder eine unbedacht gestylte Schaltfläche. Zur Umsetzung eines wirklich schönen Button-Designs verwenden wir CSS3.



Zuerst muss man sich, wie fast immer im Webdesign, darüber im Klaren sein, mit welchen Farben man arbeiten möchte. Grundsätzlich gibt es eine Hintergrund-, eine Vordergrund- und eine Kontrastfarbe. Die Hintergrundfarbe der Buttons in der eigenen Webseite sollte ähnlich zur Kontrastfarbe der eigenen Internetseite sein. In unserem Beispiel ist das ein relativ helles Orange. Die Textfarbe des Buttons sollte die Vordergrundfarbe der Webseite widerspiegeln. In unserem Beispiel Weiß. Die Hintergrundfarbe der Webseite findet im Button-Design keine Anwendung.

Schritt 1: Den Button im HTML-Code erstellen

Es gibt drei Möglichkeiten, im HTML-Code eine Schaltfläche zu erzeugen.

Möglichkeit 1

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

So werden üblicherweise Buttons definiert, die nicht in einem Formular-Kontext stehen, also Buttons, die nicht vom <form>-Tag umschlossen sind.

Möglichkeit 2

<input type="button" class="mybutton" value="Absenden" />

Buttons, die so definiert sind, werden üblicherweise vom <form>-Tag umschlossen, stehen also im Formular-Kontext. Sie werden innerhalb eines Formulars verwendet, um bestimmte Elemente des Formulars(z.B. Hinweise oder Textfelder) ein- oder auszublenden.

Möglichkeit 3

<input type="submit" class="mybutton" value="Absenden" />

Solche sogenannten "Submit-Buttons" werden verwendet, um ein HTML-Formular abzusenden.

Schritt 2: Dem Button per CSS eine geeignete Hintergrund- und Textfarbe zuweisen

Wie bereits oben erwähnt, sollte die Hintergrundfarbe des Buttons der Kontrastfarbe der Internetseite entsprechen, auf der er sich befindet. Die Textfarbe des Buttons sollte in den meisten Fällen der Vordergrundfarbe dieser Internetseite gleichen. In unserem Fall haben wir für die Hintergrundfarbe einen Orange-Ton, für die Textfarbe weiß verwendet:

.mybutton {
  background-color: #fb842c;
  color: white;
}

Damit sieht der Button so aus:

Anschließend fügen wir einen Farbverlauf hinzu. Das macht den Button etwas interessanter. Dafür entfernen wir erst das background-color-Attribut und ersetzen es durch das background-Attribut. Um den Farbverlauf zu realisieren gibt es in CSS3 den background-Wert "linear-gradient(Farbe1, Farbe2)", das einen vertikalen Farbverlauf von Farbe1 zu Farbe2 darstellt. Farbe1 sollte etwas heller gewählt werden, als die bisherige Hintergrundfarbe des Buttons(In diesem Beispiel war das "#fb842c"). Farbe2 etwas dunkler. Die bisherige Hintergrundfarbe lassen wir vor dem linear-gradient-Wert stehen. Denn ältere Browser, die linear-gradient nicht verstehen, werden diese Farbe anzeigen. Unser CSS-Code lautet dann:

.mybutton {
  background: #fb842c linear-gradient(#f99b5c, #f9770e);
  color: white;
}

Das Ergebnis sieht dann so aus:

Schritt 3: Die Feinheiten - Abstände, Schriftart, Rahmen und Schatten

Was an unserem Zwischenstand nun vor Allem negativ auffällt, ist der Rahmen um den Button und der "eingequetschte Look". Um den Rahmen zu entfernen, ergänzen wir unseren CSS-Code um das Attribut "border: none;". Den eingequetschten Look beseitigen wir mit dem padding-Attribut. Diesem weisen wir den Wert "5px 10px" zu. 5px ist hier der vertikale Abstand des Textes zum oberen und unteren Rand des Buttons, 10px der horizontale Abstand zum linken und rechten Rand. Dieser Abstand kann natürlich auch frei gewählt werden. Allerdings empfehlen wir, den horizontalen Abstand merklich größer zu halten, als den vertikalen. Damit erhalten wir folgenden CSS-Code:

.mybutton {
  background: #fb842c linear-gradient(#f99b5c, #f9770e);
  color: white;
  border: none;
  padding: 5px 10px;
}

Der Button sieht dann so aus:

Um dem Button noch den allerletzten Schliff zu geben, ändern wir noch die Schriftart und -größe, runden die Ecken noch etwas ab und geben dem Button einen Schatten:

.mybutton {
  background: #fb842c linear-gradient(#f99b5c, #f9770e);
  color: white;
  border: none;
  padding: 5px 10px;
  font-family: "Open Sans", sans-serif;
  font-size: 12px;
  border-radius: 3px;
  box-shadow: 0 2px 2px rgba(0,0,0,0.6);
}

Die Schriftart "Open Sans" haben wir aus Google Fonts genommen.
Mit diesen Änderungen haben wir schon einen wirklich schönen Button erstellt:

Nun fügen wir noch einen minimalen Textschatten hinzu, der dem Button-Text einen Inset-Look verleiht und ändern den Cursor, sodass er sich in eine Hand verwandelt, wenn man mit ihm über den Button fährt. Der CSS-Code sieht damit so aus:

.mybutton {
  background: #fb842c linear-gradient(#f99b5c, #f9770e);
  color: white;
  border: none;
  padding: 5px 10px;
  font-family: "Open Sans", sans-serif;
  font-size: 12px;
  border-radius: 3px;
  box-shadow: 0 2px 2px rgba(0,0,0,0.6);
  text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
  cursor: hand;
}

Der fertige CSS3-Button sieht dann so aus:

Die fertige HTML-Datei kann hier heruntergeladen werden.