Tutorial: Web 2.0 Buttons mit Hilfe von CSS3

08.08.2011

12:01

Tutorial: Web 2.0 Buttons mit Hilfe von CSS3

In unserem heutigen Tutorial zeigen wir, wie man mit Hilfe von CSS und völligem Verzicht auf Grafiken ansprechende Web-Buttons erzeugen kann. Da noch nicht alle Browser die neuen CSS-Eigenschaften unterstützen, wird hier beispielhaft auf die Implementierungen des Mozilla Firefox eingegangen.

Der Anfang

Die Grundlage für den Button bildet in diesem Beispiel ein einfaches Anchor-Tag. Für die übersichtlichere Darstellung wurde hier auf die HTML5-Syntax zurückgegriffen.

Ein paar grundlegende Style-Definitionen bringen den Anchor in die Ausgangsposition für die weitere Bearbeitung.

<!-- Der Button -->
<!doctype html>
<html>
  <head>
    <title>CSS3 Button</title>
  </head>
  <body>
      <a id="myButton">Click me!</a>
  </body>
</html>

#myButton{
  display: inline-block;
  border: 1px solid #800000;
  color: #FFFFFF;
  background-color: #FF0000;
  font-size: 25px;
  font-family: arial, helvetica, verdana;
  padding: 10px 14px;
  text-decoration:none;      
  background: #FF0000;
  font-weight: bold;
  cursor:pointer;
}

Das Resultat sieht dann folgendermaßen aus: ein rechteckiger Button mit weißer Schrift auf rotem Grund.

Der Verlauf

Kommen wir nun zum interessanten Teil. Um den Button plastischer wirken zu lassen, fügen wir nun einen Verlauf hinzu. Was früher nur mit aufwändigen Grafiken möglich war, ist (zumindest für den Firefox) mittlerweile ganz einfach durch die CSS-Eigenschaft -moz-linear-background umzusetzen.

Für einen einfachen Farbverlauf fügen wir einfach folgende Zeile in unser Stylesheet ein:

background-image:-moz-linear-gradient(270deg, #b90000 ,#FF0000);

Hierdurch erhalten wir einen Oben-Unten-Farbverlauf von Dunkelrot (#B90000) bis ins Hellrot (#FF0000).

Mehr Verlauf

Um die Plastizität noch weiter zu erhöhen, benötigen wir jedoch eine scharfe Kante innerhalb des Verlaufs. Diese bringt den gewünschten Glanzeffekt. Glücklicherweise bietet die Gradient-Eigenschaft die Möglichkeit, mehrere Farbverläufe mit Hilfe von Positionsangaben zu kombinieren.

Im untenstehenden Bild kann man erkennen, wie dieser Effekt zustande kommt. Unseren bestehenden Farbverlauf lassen wir bei der Hälfte abwärts beginnen. Darüber setzen wir einen sehr dezenten Verlauf in ein helleres Rot nach oben hin, abgeschlossen von einem Glanzlicht, welches einen zusätzlichen Akzent setzt.

Im Code sieht das Ganze dann folgendermaßen aus:

background-image:-moz-linear-gradient(270deg, #FF4545 1px, #f00000 1px, 
                                      #e80000 50%, #b90000 50%, 
                                      #FF0000 100%);

Die Zahlen und Prozentangaben hinter den Farbwerten geben den Bereich an, in dem sie angezeigt werden. Dazwischen wird jeweils der Verlauf gerendert. Auffällig ist der Bereich um 50%. Hier werden zwei Definitionen gemacht um die harte Kante zu erzeugen. Die erste Angabe dient für den Verlauf nach oben, die zweite für den Verlauf nach unten.

Das Resultat

Reichern wir jetzt noch das CSS um etwas Border-Radius, Text- und Rahmenschatten an, ist unser Web2.0-Button auch schon fertig - und das komplett ohne Einsatz von irgendwelchen Grafiken.

Das live-Beispiel:

Click me!

#myButton{
  display: inline-block;
  border: 1px solid #800000;
  color: #FFFFFF;
  background-color: #FF0000;
  font-size: 25px;
  font-family: arial, helvetica, verdana;
  padding: 10px 14px;
  text-decoration:none;      
  background: #FF0000;
  font-weight: bold;   
  background-image:-moz-linear-gradient(270deg, #FF4545 1px, #f00000 1px,
                                        #e80000 50%, #b90000 50%,
                                        #FF0000 100%); 
  text-shadow: 1px 1px 1px #630000;   
  box-shadow: 1px 1px 2px #575757;
  border-radius: 6px;
  cursor:pointer;
}

Oliver Himburg

Trackback link
Tags: css3, web 2.0, html, tutorial
614 Aufrufe

1 Kommentar(e)

Christoph H

18.08.2011

08:48

Wirklich beeindruckend, was man mit CSS Neues machen kann. Ich gebe zu, ich programmiere nicht jeden Tag damit! Gibt es schon reichweitenstarke Web-Seiten, auf denen die neuen Eigenschaften eingesetzt werden?

http://www.heyn.it

Diesen Kommentar kommentieren