NoFollow Free!
SHIFT Weblog

Dieses Blog ist ein Online-Magazin für erfahrene Website-Entwickler und Webdesigner, die PHP und Webdesign lieben.

CSS, Webdesign

The Magic of CSS3: Sexy Buttons

sexy css3-buttons

CSS3 ist seit langem in der Entwicklung, auf viele Elemente kann man aber jetzt schon zählen – jedenfalls wenn es nach dem W3-Konsortium geht. Der Internet Explorer wird wohl leider erst ab Version 9 die CSS3-Elemente untersützen. Da wir den Internet Explorer aber sowieso nicht mögen und auch andere beliebte Browser einen Großteil der CSS3-Elemente kennen, können wir ruhigen Gewissens mit CSS3 arbeiten. Dabei dürfen wir natürlich nicht vergessen, die Seite auch für Nutzer älterer Browser verfügbar zu machen. Ein schönes Beispiel, um CSS3 mit progressive Enhancement zu demonstrieren, ist ein simpler Button. Ohne CSS ist es ein normaler Link – mit CSS2 wird er aufgepeppt und mit CSS3 wird er zu dem, was moderne Buttons im Web auszeichnet: Nicht zu dick aufgetragen, elegant aber mit subtilen Details. Dazu gehört:

  • Ein dezenter Schatten um die Schaltfläche
  • Eine stilvolle Button-Schriftart
  • Die Nutzung von (alpha-)Transparenz an einigen Stellen
  • Ein sanfter Farbverlauf als Hintergrund
  • Einen Schatten für die Buttonbeschriftung
  • Eine deutliche Hervorhebung für einen aktivierten Knopf

Alle Punkte lassen sich mehr oder weniger Problemlos mit CSS3 realisieren. Für die ungeduldigen: Auf dieser Demoseite seht ihr das fertige Endergebnis. Doch wir fangen erst einmal langsam an – mit dem HTML-Code:

1
 <a class="button" href="#">Link via a-Tag</a>

Diese Zeile ist selbsterklärend. Ein Button ist dieser Link noch nicht – dafür erzeugen wir jetzt eine CSS-Klasse mit den Namen “button”. Dabei legen wir allgemeine CSS-Regeln, wie die Schriftfarbe und Schriftgröße, fest:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.button {
                display: inline-block;
                margin: 10px;
                padding: 4px 7px;
                font-size: 13px;
                color: #111;
                text-decoration: none;
                border: 1px solid #666;
                font-family: Calibri, 'Segoe UI', Arial, sans-serif;
                -webkit-user-select: none;
                -moz-user-select: none;
            }
 
            .button:hover {
                background-color: #e2e4e2;
                color: #222;
            }

Diese Button-Klasse ist nichts weltbewegendes. Die Buttons werden nahezu überall gleich aussehen, auch wenn einige Besonderheiten implementiert wurden:

  • Für die Eigenschaft display wurde “inline-block” gewählt. Damit verhält sich das klassenbezogene Element wie ein inline-Element, kann aber auch Eigenschaften von Block-Elementen wie width und height annehmen. Das macht das Styling des Buttons einfacher.
  • Bei der Font-Auswahl habe ich auf Standardschriftarten aktueller Windows-Betriebssysteme  zurückgegriffen: Calibri und Segoe UI – beides sehr schöne, klare Schriftarten. Für XP-User und Windows-Hasser ist ein Fallback für Arial bzw. eine andere sans-serif-Schriftart gewählt.
  • Nur für den Fall, falls kein CSS-Reset genutzt wird: text-decoration hat den Wert “none”, damit unsere Buttonbeschriftung nicht unterstrichen wird – wie sähe das denn aus?
  • -moz-user-select sowie -webkit-user-select sorgt im Mozilla Firefox, Google Chrome und Apple’s Safari dafür, dass der Benutzer den Text nicht markieren kann. Dies ist bei einem Button unnötig; bei Formular-Buttons ist dieses Verhalten auch in allen Browsern zu finden und wird deshalb für unseren CSS3-Button übernommen. Der Internet Explorer und Opera bleiben für dieses Verhalten außen vor – was soll’s.

Wie gesagt, dieser Button ist nichts weltbewegendes. Er sollte nun wie im rechten Kasten aussehen. Er wird von nun an als Basis für den CSS3-Button dienen. Mittels Progressive Enhancement werden wir die CSS3-Elemente einbinden, so dass für Nicht-CSS3-Browser der Fallback für unsere Basis steht.

CSS3 in Aktion

Wir werfen noch einmal einen Blick auf die Liste oben: Wir brauchen Schatten, Transparenz und Farbverlaufe, um aus unserem, zugegeben, armseligen Button einen schönen CSS3-Button zaubern.

Text-Shadow

Die Syntax für den Textshadow sieht so aus:

1
text-shadow: [offset x-Achse] [offset y-Achse] [Unschärfe] [Schattenfarbe]

Wir können also ähnlich wie in Photoshop bestimmen, in welche Richtung unser Schatten geht, welche Farbe er haben soll und wie Unscharf er zu sehen ist. Das machen wir uns zu Nutze; wir möchten einen kleinen Offsetdruck-Effekt erzielen (Apple-Style) und wählen für den text-shadow diese Angaben:

text-shadow:  0 1px 0 rgba(255, 255, 255, 0.5);

Vielleicht habt ihr bei dem letzten Argument (Schattenfarbe) einen HEX-Wert vermutet. Den hätte ich nehmen können, habe mich aber für rgba() entschieden. rgba() ist ebenfalls ein Produkt der CSS3-Küche und dient dazu, einen halbtransparenten Farbton zu bestimmen. Die ersten drei Werte bei rgba() dienen der gewohnten rgb-Werte. Mit 255,255,255 habe ich mich für ein pures weiß entschieden. Der vierte Wert ist der alpha-Transparenwert: 1 steht für volle Deckkraft, 0 steht für volle Transparenz. Mit meiner Angabe “0.5″ im vierten Argument habe ich also eine Deckkraft von 50% angegeben.

Progressive Enhancement:

Browser, die kein CSS3 können, verstehen diese Angabe auch nicht. Das macht nichts – ein subtiler Textschatten wird bei diesen Browsern dann eben nicht angezeigt.

Implementierung einer “fremden” Schriftart

Obwohl Calibri und Segoe UI meiner Meinung nach schöne Schriften sind, kann eine andere Schriftart dem ganzen Button-Look noch etwas mehr bieten. Dafür gibt es bei CSS3 die Angabe @font-face. Sie erlaubt, fremde Schriftarten in die Webseite einzubetten. Leider erwartet nahezu jeder Browser ein anderes Schriftart-Format. Daher gibt es viele Syntaxvarianten für @font-face – ich habe aber auf der Webseite von Paul Irish die perfekte Syntax gefunden. Die gute Nachricht: Nahezu jeder Browser unterstützt das Einbinden von “fremden” Schriftarten via @font-face – sogar der Internet Explorer ab Version 6 (reibt euch ruhig die Augen – ihr habt richtig gelesen) !

Nebem dem Problem der unterschiedlichen Dateiformate muss man sich auch Gedanken um die Lizenz für eine Schriftart machen. Man darf nur Schriftarten verwenden, die eine Lizenz für die Veröffentlichung im Web haben.

Das klingt ersteinmal relativ schwierig umzusetzen. Aber dank Font Squirrel gibt es für Webdesigner eine riesige Auswahl von ganzen @font-face-Kits. Diese könnt ihr euch sofort herunterladen – in dem Archiv befinden sich nicht nur die Schriftarten in den erforderlichen Formaten, sondern auch eine Beispieldatei für die Einbindung via CSS. Für so einen Service könnte Font Squirrel glatt Geld verlangen.

Ich habe mich für die Schriftart “Molengo” entschieden, die Implementation mit @font-face sieht dann so aus:

1
2
3
4
5
6
7
@font-face {
                    font-family: 'MolengoRegular';
                    src: url('Molengo-Regular-webfont.eot');
                    src: local('☺'), url('Molengo-Regular-webfont.woff') format('woff'), url('Molengo-Regular-webfont.ttf') format('truetype'), url('Molengo-Regular-webfont.svg#webfontyEeEFwQp') format('svg');
                    font-weight: normal;
                    font-style: normal;
            }

Diese Zeilen können irgendwo (an valider Stelle) in eurer Stylesheet-Datei stehen. Wenn das erledigt ist, könnt ihr die Schrift mit dem Namen “MolengoRegular” wie gewohnt einbinden:

font-family: 'MolengoRegular', Calibri, 'Segoe UI', Arial, sans-serif;

Progressive Enhancement:

Obwohl die Unterstützung für @font-face sehr groß ist, kann es immer mal wieder sein dass ein exotischer Browser diese Angabe nicht interpretiert. Oder die Schriftartdatei kann aus irgendeinem Grund nicht gefunden werden – in diesem Fall haben wir die Fallback-Schriften wie Seogoe UI und Arial verwendet.

Border-Radius

Mit der CSS3-Angabe border-radius sind ganz einfach “runde Ecken” gemeint. Mit dem border-radius kann man sein eckiges Design einfach aufpeppen. Wir werden die runden Ecken selbstverständlich für unsere sexy Buttons nutzen. Die Syntax für den border-radius sieht so aus:

border-radius: [Wert]

Es gibt noch weitere Syntaxvarianten für den border-radius, etwa um Ecken unterschiedlich rund zu machen. Das ist aber für unser Vorhaben unnötig, und somit belassen wir es bei dieser einfachen Syntaxwahl. Ich habe einen border-radius mit dem Wert “4px” gewählt.

Leider ist die CSS3-Angabe “border-radius” noch nicht vollständig freigegeben; daher gibt es für die webkit- und mozilla-Engines ein Präfix, um den border-radius speziell für diesen Browser anzusprechen. Damit wir also alles unter einen Hut kriegen, werden wir alle drei Elemente verwenden:

-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;

Progressive Enhancement

Ganz klare Kiste: Wenn der Browser kein border-radius kennt, wird er auch nicht interpretiert. Die Folge: Der Button wird bzw. bleibt eckig. Funktionieren tut er natürlich trotzdem.

Farbverlauf als Hintergrund

Vor der CSS3 waren Webdesigner gezwungen, eine Hintergrundgrafik zu entwickeln und einzubinden, um einen Farbverlauf als Hintergrund für ein bestimmtes Element zu bestimmen. Weitere Nebenwirkung: Mehr Traffic, da die Bilddatei geladen werden musste.

Das geht jetzt mit CSS3 zum Glück besser. Leider gibt es noch keine allgemeingültige Syntax für den Farbverlauf; Die Mozilla- und Webkit-Engine haben aber je eine eigene Syntax erdacht, um den Farbverlauf mit CSS zu realisieren. Dabei kann man neben einem linearen Farbverlauf auch einen radialen Verlauf wählen. Wir belassen es bei dem linearen Farbverlauf; die Syntax für den radialen Verlauf ist nur schwer zu verstehen. Beide Engines verlangen eine andere Syntax, die Grundangaben sind aber bei beiden gleich: Zwei Farbwerte werden verlangt: Der obere und der untere. Ich habe mich für einen sanft-grauen Farbverlauf entschieden. Hier die Realisierung mit CSS3:

background: -webkit-gradient(linear, left top, left bottom, from(#fafbfa), to(#adaead));
background: -moz-linear-gradient(#fafbfa, #adaead);

Zugegeben, die Syntax für Mozilla-Browser (-moz-*) sieht übersichtlicher aus. Man darf gespannt sein, wie die offizielle Angabe für den CSS3-Farbverlauf aussehen wird.

Progressive Enhancement

Durch die o.g. Angabe wird jeder Wert für “background” überschrieben, der im Vorgeld getätigt wurde. Das kann bei den Browsern Nachteile mit sich bringen, die CSS3 nicht verstehen. Daher werden wir nach den Farbverlaufs-Angaben noch die Grundton-Farbe des Buttons angeben, die jeder Browser versteht. Der Verlauf geht dabei nicht verloren, weil background nicht von background-color überschrieben wird. Hier der Code:

background: -webkit-gradient(linear, left top, left bottom, from(#fafbfa), to(#adaead));
background: -moz-linear-gradient(#fafbfa, #adaead);
background-color: #d0d2d0;

Box-Shadow

Mit dem Box-Shadow haben wir die Möglichkeit, einem Block-Element einen Schatten zu verleihen. Bevor es diese CSS3-Angabe gab, haben sich Webdesigner mit ineinander verschachtelten DIV’s herumgeprügelt. Hier die Syntax für den box-shadow:

1
box-shadow: [offset x-Achse] [offset y-Achse] [Unschärfe] [Schattenfarbe]

Ihr habt es sicher gemerkt; die erwarteten Parameter sind identisch mit dem Text-Shadow. Auch hier haben Mozilla und Webkit ihr eigenes Süppchen gekocht, da box-shadow noch nicht zu 100% verabschiedet ist.

Wie beim text-shadow habe ich bei der Farbangabe einen halbtransparenten Farbton genommen, damit der Schatten bei den Buttons nicht Überhand nimmt. Der Button soll den Benutzer ja nicht gleich mit Effekten erschlagen. Hier meine Realisierung:

-webkit-box-shadow:  0 1px 2px rgba(0,0,0, 0.4);
-moz-box-shadow: 0 1px 2px rgba(0,0,0, 0.4);
box-shadow:  0 1px 2px rgba(0,0,0, 0.4);

Als Box-Shadow habe ich also einen halbschwarzen Schatten gewählt, der eine Unschärfe von 2px aufweist und leicht nach unten versetzt wurde.

Progressive Enhancement

Auch hier gilt: Nicht-CSS3-Browser werden den Button ohne Schatten darstellen. Er wird aber natürlich auch trotzdem als Button zu erkennen sein.

Unser CSS3-Button im Überblick

Hier noch einmal der ganze Code. Ich habe für den :hover-Zustand des Buttons einige Werte verändert, damit er plastischer wirkt:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
.button {
    display: inline-block;
    margin: 10px;
    padding: 4px 7px;
    font-size: 13px;
    color: #111;
    text-decoration: none;
 
    border: 1px solid #666;
    border: 1px solid rgba(0, 0, 0, 0.6);
 
    font-family: 'MolengoRegular', Calibri, 'Segoe UI', Arial, sans-serif;
 
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
 
    text-shadow:  0px 1px 0 rgba(255, 255, 255, 0.5);
 
    background: -webkit-gradient(linear, left top, left bottom, from(#fafbfa), to(#adaead));
    background: -moz-linear-gradient(#fafbfa, #adaead);
    background-color: #d0d2d0;
 
    -webkit-box-shadow:  0 1px 2px rgba(0,0,0, 0.4);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0, 0.4);
    box-shadow:  0 1px 2px rgba(0,0,0, 0.4);
 
    -webkit-user-select: none;
    -moz-user-select: none;
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#a3a4a3', Direction=145, Strength=1);
 
}
 
.button:hover {
    background: -webkit-gradient(linear, left top, left bottom, from(#fcfdfc), to(#bdbebd));
    background: -moz-linear-gradient(#fcfdfc, #bdbebd);
    background-color: #e2e4e2;
    -webkit-box-shadow: 0 0 2px rgba(0,0,0,0.5);
    -moz-box-shadow: 0 0 2px rgba(0,0,0,0.5);
    box-shadow: 0 0 2px rgba(0,0,0,0.5);
    color: #222;
}

Hierbei gibt es noch zwei Dinge zu sagen:

  • Ich habe noch klammheimlich eine rgba-Angabe für border-color verwendet. Falls rgba vom Browser nicht verstanden wird, habe ich eine Zeile zuvor eine Fallback-Farbvariante gelassen.
  • In der letztzen Zeile der button-Klasse habe ich eine hässliche Zeile eingefügt: Sie sorgt dafür, dass auch Microsoft-Browser einen schattigen Button darstellen. Dieser ist zugegeben nicht sehr schön, erfüllt aber seinen Zweck. Dies ist im übrigen der einzige Workaround, den ich für den sturen Internet Explorer eingebunden habe (mit Ausnahme von der Transparenz via opacity, den Einsatz seht ihr weiter unten). Es existieren noch viele andere Lösungen, dem IE beizubringen. Alle diese Workarounds hatten aber den ein oder anderen Nachteil – so dass ich “nur” den Schatteneffekt und Opacity (weiter unten) benutzt habe.

Lange Rede, kurzer Sinn: So sieht unser Button jetzt in vernünftigen Browsern aus:


Oben ist noch der Basisbutton zu sehen, unten dann unser CSS3-Button! Ausprobieren könnt ihr ihn hier.

Wenn der Button zu groß bzw. zu klein für euch ist, könnt ihr etwas mit den Werten für padding und font-size rumspielen.

CSS3 Buttons, perfektioniert

Unser Button wird nun noch etwas perfekter gemacht. Zunächst fügen wir die Optik für einen aktivierten Button ein.

Optik für den aktivierten, gedrückten Button

Der Benutzer des Buttons soll eine optische Rückmeldung erhalten, wenn er einen bestimmten Knopf gedrückt bzw. gedrückt hält. Außerdem stellen wir eine CSS-Klasse zur Verfügung, um einen Button von vornherein als “gedrückt” zu markieren – z.B. via JavaScript.

Die Realisierung für den gedrückten Button könnt ihr hier “live” erleben.

Hier erstmal der zusätzliche Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.button3:active {
    position: relative;
    top: -1px;
    opacity: .77;
    filter: alpha(opacity = 77);
}
 
.button3:focus, .button3:active, .button3.selected {
    outline: none;
    border-color: #333;
    border-bottom-color: #111;
    -webkit-box-shadow: 0 0 2px rgba(0,0,0,0.5), 0px 0 5px rgba(0, 0, 0, 0.95) inset;
    -moz-box-shadow: 0 0 2px rgba(0,0,0,0.5), 0px 0 5px rgba(0, 0, 0, 0.95) inset;
    box-shadow: 0 0 2px rgba(0,0,0,0.5), rgba(0, 0, 0, 0.95) 0px 0 5px inset;
 
}
  • Wie bereits vorgewarnt, habe ich mich dazu hinreißen lassen, opacity (Transparenz) auch dem Internet Explorer beizubringen (letzte Zeile in der oberen :active-Klasse).
  • Zunächst sorgt die oberste :active-Klasse dafür, dass der Button leicht eingedrückt erscheint, sobald man den Knopf drückt. Dazu versetzte ich ihn zum Zeitpunkt des Drückens 1px nach oben und lasse ihn mittels Opacity etwas blasser erscheinen (das ist aber Geschmackssache).
  • Ist der Knopf dauerhaft gedrückt ( :focus ) so erscheint er mit einer anderen Form von box-shadow eingedrückt: Dafür benutze ich das Schlüsselwort inset nach den bereits bekannten Werten. Mit inset werden alle notierten Angaben für box-Shadow nach innen gewendet, nicht nach außen.
  • Mit der zusätzlichen Klasse .selected sind alle definierten Werte auch “per Hand” auszulösen. Das könnte bei der Verwendung dann so aussehen:
    <a class="button selected" href="/mylink">Linktext</a>

Weitere Designs für den Button

Fast objektorientiert können wir von unserer “Basis”-Buttonklasse weitere Klassen entwerfen. Ich habe beispielsweise farbige Button-Klassen erstellt (blau und orange), eine Klasse für einen inaktiven Button (dies muss man dann aber technisch mit JavaScript oder einer serverseitigen Scriptsprache realisieren – hier geht es nur um die Optik) sowie eine Klasse für einen transparenten Glas-Button erstellt. Schaut euch einfach den Quelltext der Beispielseite ein – ihr werdet sicher noch weitere Ideen für neue Buttondesigns haben.

Bekannte Probleme

  • Ich habe erwartet, dass der Button gedrückt bleibt, nachdem man ihn einmal betätigt. Google Chrome sieht das aber anders und bleibt nur so lange gedrückt, bis man die Maustaste loslässt. Bug oder Feature?

Schlusswort und weitere Möglichkeiten mit CSS3

Ich habe hier selbstverständlich nicht alle CSS3-Möglichkeiten beleuchtet. Zu nennen wäre da vielleicht noch transistion und transform – dies hat aber (noch) keine große Unterstützung, und die transform’s sehen zumindest in Google Chrome bescheiden aus.

CSS3 bietet desweiteren auch noch neue Selektoren, die nun einen ähnlichen Leistungsumfang wie jQuery besitzen. Auch hier lässt die Unterstützung noch an vielen Stellen zu Wünschen übrig (Hallo, Internet Explorer!).

A propos Internet Explorer: Besonders dieser muss leiden und zeigt selbst im IE8 den Button wie im ersten Beispiel. CSS3 ist ihm völlig unbekannt. Ich nennen den Link gerne nochmal: Hier steht beschrieben, wie man dem Internet Explorer verschiedene CSS3-Techniken beibringt. Viele davon beruhen auf JavaScript. Die Microsoft-internen Filter bringen oft kein zufriedenstellendes Ergebnis.

 

Kommentare

Auf dieses Thema gibt es 2 Reaktionen

  1. Danke für den super Artikel :D

    lg
    ubuntuxx

  2. Danke! CSS ist mehr Mittel zum Zweck als alles andere. Darum bin ich von solchen kleinen Tricks immer schwer angetan.

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

*

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">

 

Weitere Artikel der Kategorie Webdesign

Allgemein, Webdesign

UI Design: 13 Schritte zum besseren Formular

Formulare im Internet sind der Schlüssel zur Kommunikation und Interaktion. Kaum eine Webseite kommt ohne sie aus, und nicht selten werden Formulare zur ersten Kontaktaufnahme genutzt. Es ist jedoch so, dass die Internetnutzer eigentlich keine Lust haben, Formulare auszufüllen. Es wird als lästig empfunden, und die Aufgabe eines Webdesigners sollte es sein, das Formular so

Weiterlesen ›

PHP, Webdesign

This is not sexy: PHP-Template-Engines á la Smarty

Nachdem ich mich in der Vergangenheit über das Zend Framework, Flash und CSS Frameworks ausgelassen habe, ist es mal wieder an der Zeit, den Buhmann zu spielen und möchte mich hier nun über einige PHP-Template-Engines aussprechen. Stellvertretend für viele dieser Projekte werde ich im laufe des Artikels “Smarty” nennen – ich glaube, dass dieser Name

Weiterlesen ›

Webdesign

7 Dinge, die professionellen Webdesignern nicht passieren dürfen

Ich schreibe diesen Artikel, weil unser neuer Klient unzufrieden mit den Entwürfen mehrerer Mitbewerber war. Ich dachte zunächst, dass er das Design der anderen nicht mochte. Nach einem Gespräch stellte sich aber heraus, dass der Klient glücklicherweise schon einmal in der HTML/CSS-Materie Fuß gefasst hat und sich bereits im Vorfeld über gängige Webdesignpraktiken informiert hat.

Weiterlesen ›