Mit CSS Links gestalten - Sliding Doors Button

Einen Kommentar schreiben

In diesem Artikel, der auch nicht besonder lange wird, erkläre ich kurz wie ein Button mittels CSS erstellt wird, der sich jeder Grösse anpasst. Natürlich wird auch hier auf Ladefreundlichkeit wert gelegt, und lediglich der Text auf den Buttons getauscht. Wie auch schon im Teil 1 beschrieben.
Den Button den ich heute zeige, findet man auch hier im Einsatz und kann somit gut in Funktion angesehen werden.
Zu erst benötigen wir zwei Button Grafiken, wobei bei der linken darauf geachtet werden sollte das diese breit genug ist, um immer genug Text fassen zu können.
Die linke Grafik:
button_grafik

Und hier der Abschluss rechts:
button_grafik

Hier nun der CSS Code wie er auch bei mir im Einsatz ist.

Der CSS Code


a.test_button {
  background: url(button_right.png) no-repeat scroll top right;
  display: block;
  float: left;
  height: 26px;
  margin-right: 10px;
  padding-right: 10px;
  text-decoration: none;
  color: #FFF;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
}
 
a.test_button span {
  background: url(button_left.png) no-repeat;
  display: block;
  line-height: 14px;
  padding: 7px 0 6px 15px;
}

Oben geschriebener CSS Code erzeugt schon mal den Button und wird in Html eingebunden:

In Html eingebunden


<a class="test_button" href="#"><span>Mein Text</span></a>

Der Html Befehl <span> sorgt dafür das die flexible breite eingehalten wird und steuert die linke Grafik.
Um nun auch einen Hover Effekt zu erzeugen nehme man nur den schon vorhanden CSS Code und füge bei der Class ein :hover hinzu. Natürlich zu vergessen die Grafik wie gewünscht zu verändern, einfärben oder sonstiges und das auch im CSS dementsprechen anzupassen.
Hier nun die Hover Grafiken. Die linke Grafik:
button grafik

Und die rechte Grafik:
button grafik

Das CSS noch mit diesem Code erweitern und fertig ist der Button mit Hover Effekt.

Der CSS Code-Hover


a.test_button:hover {
  background: url(button_right_hover.png) no-repeat scroll top right;
  display: block;
  float: left;
  height: 26px;
  margin-right: 10px;
  padding-right: 10px;
  text-decoration: none;
  color: #000;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
}
 
a.test_button:hover span {
  background: url(button_left_hover.png) no-repeat;
  display: block;
  line-height: 14px;
  padding: 7px 0 6px 15px;
}

Diesen Artikel verlinken


<a href="http://www.pixelmania.at/css_links_gestalten_sliding_door_button.php" title="Flexiblen Button mit CSS erstellen von pixelmania.at">Flexiblen Button mit CSS erstellen von pixelmania.at von pixelmania.at</a>

Leider noch kein Kommentar vorhanden.

Hier kannst Du Deinen Kommentar zu diesem Artikel schreiben.