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

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...
Mozilla veröffentlicht ein HTML5-basiertes Browser... Der Markt der Browserspiele boomt. Mittlerweile erwirtschaften die Marktführer in diesem Bereich Jahres-Umsätze im dreistelligen Millionen-Bereich. ...
Heatmap mit dem HTML5 Canvas Element Heatmaps sind sinnvolle kleine Helferlein bei der Analyse einer Webpage. Ich habe schon darüber berichtet wie man mit der Open Source Clickheat eine f...
Cookies sind ja so was von 2012 … Sagen wir mal so: die Intention von Cookies ist ganz nett, die Tatsache wie sie heute genutzt werden eher nicht. Ein Cookie ist immer an eine Domain g...

Eine Antwort auf „CSS3 Buttons in Cool“

  1. „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

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