Flexible CSS-Buttons mit 3 Hintergrundgrafiken

Ich habe auf der Webseite Sohtanaka (Webdevelopment & Design) unter der Rubrik THE ART OF HAND CODING einen interessanten Artikel über Liquid & Color Adjustable CSS Buttons entdeckt. In diesem wird in einem Tutorial ausführlich erläutert, wie Sie flexible und mit der Länge der Schrift mitwachsende CSS-Buttons erstellen können.

Beispiel ansehen (Grafik oder Button anklicken!):

(Download Beispieldatei: 7,0KB)

Erklärung des Beispieles:

Demo und Download (7,4KB Zip-Datei) Musterbeispiel:

Ich habe das vorliegende Beispiel bearbeitet und möchte Ihnen hier das Ergebnis Schritt für Schritt erläutern:

Punkt 1:

Das flexible CSS-Button erhält einleitend folgenden HTML-Quellcode:

HTML-Quellcode:
----------------------------------------------------------------------------------------
<div class="button"><a href="#">Flexible Buttons</a><span></span></div>
----------------------------------------------------------------------------------------

Es wird zuerst eine div-Box erstellt. In diese kommt der entsprechende Hyperlink. Soweit ist die Vorgangsweise wie auch sonst bei der Erstellung von Buttons. Zusätzlich bekommt die div-Box jedoch auch noch ein leeres <span>-Element. Mit diesem Trick ist es mit Hilfe von CSS und 3 Hintergrund-Grafiken möglich, das mit der Schriftlänge mitwachsende Button zu erstellen.

Punkt 2:

Die Grundlage des mit der Schrift mitwachsenden Buttons stellen die 3 Grafiken bg_left.png, bg_right.png und bg_stretch.png dar. Diese werden mit der entsprechenden CSS-Formatierung ausgestattet und erlauben es Ihnen erst, die Buttons auch farbig zu gestalten und z.B. mit einem Mouseover-Effekt auszustatten.

Sehen Sie dazu den CSS-Code:

/* Beispielbutton mit 3 Hintergrund-Grafiken */

.button {
  float: left;
  clear: both;
  background: url(images/bg_left.png) no-repeat;
  padding: 0 0 0 10px;
  margin: 5px 0;
}

.button a{
  float: left;
  height: 40px;
  background: url(images/bg_stretch.png) repeat-x left top;
  line-height: 40px;
  padding: 0 1px;
  color: #000;
  font-size: 1.3em;
  text-decoration: none;
}

.button span {
  background: url(images/bg_right.png) no-repeat;
  float: left;
  width: 10px;
  height: 40px;
}

Die obigen CSS-Anleitungen ergeben ein einfaches, aber flexibles CSS-Button (Default Adjustable & Liquid Button) mit den 3 grauen Hintergrund-Grafiken. Es wird in diesem Beispiel keine Hintergrund-Farbe eingesetzt und es wird auch die Schrift beim Überfahren des Buttons nicht verändert (bleibt #000, schwarz). Das Button sieht danach so aus:

Punkt 3:

Um eine Hintergrund-Farbe einzusetzen und einen Mouseover-Effekt einzubauen, müssen Sie nur die CSS-Anweisungen ein wenig ändern.

Sehen Sie dazu den CSS-Code:

/* Beispielbuttons mit Hintergrundfarbe und Mouseover-Effekt */

.button_col {
  float: left;
  clear: both;
  background: #690 url(images/bg_left.png) no-repeat;
  padding: 0 0 0 10px;
  margin: 5px 0;
}

.button_col a{
  float: left;
  height: 40px;
  background: url(images/bg_stretch.png) repeat-x left top;
  line-height: 40px;
  padding: 0 1px;
  color: #fff;
  font-size: 1.3em;
  text-decoration: none;
}
--------------------------
.button_col a:hover {
  color: #690;
}
--------------------------
.button_col span {
  background: url(images/bg_right.png) no-repeat;
  float: left;
  width: 10px;
  height: 40px;
}
------------------------------------------------------------------------
.button_col:hover, .button_col a:hover, .button_col span:hover {
  background-color: #fff;
}
------------------------------------------------------------------------

Die Buttons sehen mit diesen CSS-Befehlen wie folgt aus:

Ich habe in meinem Musterbeispiel im Hyperlink die Schriftfarbe mit color: #fff (weiß) festgesetzt. Mit a:hover wird die Schriftfarbe bei Überfahren des Buttons auf color: #690 (Grün-Variante) verändert.

Als Hintergrund-Farbe habe ich color: #690 (Grün-Variante) gewählt und diese in der CSS-Anweisung .button_col { background: #690 url(images/bg_left.png) no-repeat;} entsprechend formatiert.

Um den Mouseover-Effekt einsetzen zu können, mußte ich danach nur mehr 2 kleine CSS-Anweisungen in den CSS-Code einbauen. Mit diesen ändert sich beim Überfahren der Buttons sowohl die Hintergrund-Farbe als auch die Schrift des Buttons.

Hier sehen Sie die beiden Änderungen im CSS-Code:

/* Beispielbuttons mit Hintergrundfarbe und Mouseover-Effekt */

Änderung 1:
------------------------
.button_col a:hover {
  color: #690;
------------------------
Änderung 2:
------------------------------------------------------------------------
}
.button_col:hover, .button_col a:hover, .button_col span:hover {
  background-color: #fff;
}
------------------------------------------------------------------------

Sie haben mit diesen CSS-Befehlen die Möglichkeit, die flexiblen Buttons ganz nach Ihrem Geschmack einzufärben und mit der Schriftfarbe zu experimentieren.

Fertiges Musterbeispiel (7,4KB Zip-Datei):