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

HTML5 & CSS3 – Was funktioniert in welc... HTML5 und CSS3 nähert sich in großen Schritten, und spätestens dann wird sich im Bereich der Webentwickler die Spreu vom Weizen trennen, da beides ebe...
melonJS – Spieleentwicklung in HTML5 Spieleentwicklung in HTML5 ist "the next big thing" - aber das ist nicht wirklich was Neues. Es geht inzwischen auch nicht mehr wirklich um das ob, so...
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...
Datenvisualisierung in HTML5 mit HumbleFinance Fast jedes Trackingtool bzw. eCommerce-Paket visualisiert heutzutage Daten als Graphen. Dabei werden entweder Verkaufszahlen oder Besucherzahlen in ne...

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.