CSS3 Buttons in Cool

Zur Zeit gibt es jede Menge Tutorials darüber, wie man in CSS3 Buttons mit runden Ecken, Gradients und quietschigen Farben hinbekommt. Die Frage, die sich bei all den Tutorials stellt, ist ja eigentlich die: wer braucht so ein buntes Zeug? Der Kunde an sich will in der Regel erkennen, das ein Button ein Button ist und insofern ist es nie verkehrt, wenn man einem gestalteten Button von einem Standard-Button ableiten kann.

Screenshot der CSS3 Buttons

Nun gibt es da aber endlich dieses eine Tutorial, das sinnvoll ist, und alle anderen doof dastehen lässt. Die Buttons sind nicht nur sinnvoll, sondern nutzen auch die Fähigkeiten von CSS3 voll aus. In Ihrer Darstellung stehen sie in einem klaren Bezug zum Standard-Button, sind aber wesentlich cooler und vor allem das hervorheben des Icons gefällt mir besonders gut. Und in der Tat: es ist wirklich alles nur CSS!

In den verschiedenen Browsern sieht es annehmbar aus, und wenn man will kann man sich den Button sogar im IE6 anschauen, und im IE7 geht es auch. Dadurch das der Button aus reinem CSS ist, kann man mit einer einzelnen Zeile die gesamte Größe des Buttons anpassen! Erhöht oder reduziert man die Font-Size ändert man direkt die gesamte Größe des ganzen Buttons, denn auch die Icons sind Text und keine Grafiken!

Eine super Sache wie ich finde, die Buttons sehen sehr gut aus, ein Bezug zu den bestehenden Standard-Buttons ist gegeben und es funktioniert in jedem Browser. Nach meiner Meinung die bisher beste Umsetzung von Buttons in CSS3!

 

Ähnliche Beiträge

Neue CSS3 Snippets für die heimische Werkbank Ich habe ja letztens erst über PHP Snippets berichtet und Methoden zu deren Verwaltung. Zumindest bei letzterem bin ich seitdem weder schlauer geworde...
Isometrie und CSS3 Isometrie ist/war ein beliebter Mechanismus in Online-Spielen, um sich diverse Probleme hinsichtlich Perspektive und Schatten vom Hals zu schaffen. Du...
Rollenspiele in HTML5 Was waren das noch Zeiten als isometrische Grafiken das neue Ding waren. Während man sich mit Telnet durch MUDs gekämpft hatte, und das erste Ultima a...
Unterschiedliches CSS3 für verschiedene Links CSS3 erlaubt es, nicht wie bisher alles Links gleich zu stylen, bzw. diese über eine Klasse zu unterscheiden, sondern Links mit verschiedenen Zielen d...

Ein Kommentar

  • „Nach meiner Meinung die bisher beste Umsetzung von Buttons in CSS3!“

    Ich finde um einiges besser umgesetzt sind die Buttons unter http://lab.simurai.com/css/buttons/. Der Autor hat hier sogar noch zwei Schritte weitergedacht, als bei Ihrer Seite. Dort wird mit Hilfe des in HTML5 neu eingeführten „data-*“ Attributes ein beliebiges Unicode-Zeichen mit CSS3 als Ausgabe „umgelenkt“. Dies geschieht mit der folgende Angabe:

    .button:before {
    content: attr(data-icon);
    font: 1.2em/0 ‚Pictos‘,sans-serif;
    margin-right: 0.4em;
    }

    Die Icons, wie bei Ihren Beispiel auch, werden in jedem Browser anders dargestellt. Dafür verwendet der Auto jedoch bildhafte Schriftarten, sogenannte Pictos oder Writesocials, welche mit der Wingdings Schriftart vergleichbar sind. Diese sind jedoch nicht zwingend notwendig.

    Vorteil gegenüber Beispiel 1:
    * CSS-Code wird nicht wie in dem vorigen Beispiel unnötig aufgebläht. Man kann das Attribut beispielsweise mit PHP, Javascript etc. verändern, ohne vorher alle möglichen Klassen definieren zu müssen!
    * ebenfalls Valide in HTML5/CSS3 fähigen Browsern
    * Semantische Buttons sind möglich und es ist im Allgemeinen auch semantisch gesehen besser als die Klassenvariante
    * einheitliches Erscheinungsbild in allen HTML5/CSS3-Fähigen Browsern, wenn Pictos zum Einsatz kommen

Schreibe einen Kommentar