Sura 1 Artworks

Acrylmalerei, Mischtechniken, Webdesign

Flexible CSS-Buttons mit 3 Hintergrundgrafiken

Posted by sura1 - 24. November 2008

24nov
Bookmark and Share

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

liquid_buttons demo_ausfuhren2

zipkarton1 (Download Beispieldatei: 7,0KB)

Erklärung des Beispieles:

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

demo download

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:

liquid_button

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:

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

demo download

4 Antworten to “Flexible CSS-Buttons mit 3 Hintergrundgrafiken”

  1. Jürgen said

    Sehr schöne Anleitung!

  2. Andy said

    Sehr schöne Buttons, nur leider nicht IE <7 kompatibel, da er bekanntlich die Transparenz bei PNG's nicht anzeigt.

  3. Hallo, schöne Buttons. Leider mit PNG Hintergrund-Bild was Andy bereits gesagt hat.

    Gruß, Alex

    • sura1 said

      Hallo Alex!

      Danke für dein Lob wegen der Buttons. Die Problematik mit dem IE-Browser (Version niedriger als IE7) ist mir hinlänglich bekannt und wird hoffentlich (!) bald aus der Internetspähre verschwinden!

      lg
      Sura1

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

 
%d Bloggern gefällt das: