Dotmagic

Web(2.0) Buttons mit CSS Style Posted on March 15, 2008

Mit etwas CSS können hässliche, graue Buttons sehr viel schöner aussehen. Ich habe mir die Mühe gemacht und ein paar Beispiele zusammengestellt.

Wie man sieht sind die Möglichkeiten jedoch sehr begrenzt. Es lassen sich nur Ränder, Farbe und Schrift verändern. Bereits mit Rändern (siehe 3. Button) gibt es Probleme, denn nicht alle Browser können die Ränder gleich darstellen. Mit Buttons wie man Sie von Modernen Web 2.0 Webseiten kennt hat das wenig zu tun. Fazit: Laaaangweilig! :)

Etwas schöner sieht es mit einem Farbverlauf als Hintergrund aus. Bei dem dem folgenden Beispiel habe ich versucht das Ocean Metal Look & Feel bei Java/Swing zu simulieren.

HTML Code (Button 5)

<p><input type="submit" class="btn5" value="Button 5" /></p>

CSS Code (Button 5)

input.btn5 {
    font: normal normal 85% Arial, sans-serif;
    line-height: 23px;
    height: 23px;
    background: url(swing.png) 0 50% repeat-x;
    border: 1px solid #7a8a99;
    cursor: pointer;
}
input.btn5:hover {
    outline: 1px solid #7a8a99;
}

Ergebnis:

Runde Ecken

Ok, was tun wenn ein Kunde unbedingt Buttons mit Runden Ecken wünscht?

Ich bin mir sicher 99,9% aller Webdesigner denken sofort an graphische Buttons und setzen dies um mit: <input type="image" src="mybutton.jpg" alt="Senden" />. Aber damit gibt man leider die gewünschte Flexibilität auf.

Nun stellt man sich folgendes Szenario vor, es gibt ca. 10 Buttons auf der Webseite. Die Webseite soll in 4 Sprachen verfügbar sein, schon haben wir 40 Buttons. Jeder einzelne Button muss von Hand mit einer Grafik Software erstellt werden. Aber .... 1 Jahr später sollen die Buttons teilweise neu beschriftet werden ...und nochmal beginnt unser Szenario erneut :)

Weiterhin kann mit dieser Lösung die Beschriftung der Buttons nicht so einfach mit einem CMS realisiert werden. Eine Möglichkeit wäre die Buttons on-the-fly mit Image Magick bzw. GD zu generieren, am besten mit Cache Funktionalität (hoher Aufwand).

Flexible CSS Buttons, die Neue Alternative

Mit der oben genannten Lösung war ich nicht zufrieden. Schön wäre es wenn ich 2 Hintergrund Grafiken verwenden könnte (1x linker- und 1x rechter Teil des Buttons die sich beide überlappen). Die Vorteile wären Schrift ist (begrenzt) skalierbar und die Buttons können variable in der Länge sein. Ein alt Attribute wird auch nicht mehr benötigt. Eine ähnliche Technik verwende ich häufig für Headlines mit variabler Länge um runde Kanten zu erzeugen. Damit 2. Hintergründe verwendet werden können wird leider zusätzliches Markup benötigt. Ich verwende dazu ein <div>. Mit <input> ist es nicht möglich HTML Kind Elemente zu verwenden aber mit <button> geht dies sehr wohl.

Hier noch einmal die Idee:

Zunächst der HTML Code, trotz zusätzlichen Markup sehr überschaubar.

<p><button type="submit" class="btn7"><div>Button 7</div></button></p>

Der CSS Quellcode ist etwas komplexer:

button.btn7 {
    background: #f8f8f8 url(btn7a.png) 0 50% no-repeat;
    padding: 0;
    margin: 0;
    border: 0;
    cursor: pointer;
}

button.btn7 div {
    background: #f8f8f8 url(btn7b.png) 100% 50% no-repeat;
    color: #fff;
    font: normal bold 85% Arial, sans-serif;
    line-height: 24px;
    white-space: nowrap;
    padding: 0 8px;
}

Last but not least, das Resulat:

Demo & Quellcode CSS Buttons

Post a comments