Anzeige
Smartes Cloud Hosting für anspruchsvolle Projekte.
↬ Loslegen und Spaces testen ↬ Jetzt testen!
Dieter Petereit 16. Juli 2013

Buttons: Einfache CSS-Bibliothek zur Erstellung vielfältiger Schaltflächen

JavaScript- und Ruby-Entwickler Alex Wolfe aus San Francisco legt mit Buttons eine CSS-Bibliothek vor, die sich um nichts anderes als um die einfache, aber variantenreiche Gestaltung von Schaltflächen auf Websites kümmert. Buttons entsteht unter Verwendung von Sass und Compass, wobei man von diesen beiden Begriffen nur dann etwas gehört haben muss, wenn man die Buttons-Bibliothek an seine persönlichen Bedürfnisse anpassen will. Will man das nicht, reichen CSS-Grundkenntnisse…

Anzeige

Buttons: Einfache CSS-Bibliothek zur Erstellung vielfältiger Schaltflächen

Buttons: Einfach mit CSS, etwas aufgemotzt mit Font Awesome und getunt mit jQuery

Neun verschiedene Button-Styles erstellte Wolfe, darunter auch einen Satz im beliebter werdenden Flat Design. Die Verwendung aller verfügbaren Varianten ist sehr einfach. Hierzu bedarf es lediglich des Befolgens der vorgegebenen Syntax. Button-Styles werden als Klassen übergeben. Wolfe hat sich dabei dafür entschieden, normal sprachliche Bezeichnungen zu verwenden. Darüber lässt sich streiten. Grundsätzlich zeigen sich alle virteullen Knöpfe in diesem Farbschema:

Buttons: Einfache CSS-Bibliothek zur Erstellung vielfältiger Schaltflächen

Wieso die farbigen Buttons nun auf die Bezeichner primary, action, highlight, caution und royal hören, ist letztlich nicht vollständig nachvollziehbar. Insbesondere die Kombination des Bezeichners royal mit der Farbe Violett gibt mir doch Rätsel auf. Aber gut, betrachten wir es als eine Art Vokabeln. Die muss man nicht verstehen, die muss man nur wissen.

Neben den Knöpfen im Flat Design gibt es noch welche mit Glow-Effekt (einem farbigen Schein außen rum), gewölbte, runde und etliche mehr. Will man Icons innerhalb der Elemente einsetzen, ist es erforderlich, Font Awesome mit einzubinden. Die erforderlichen Dateien werden mitgeliefert.

Um Schaltflächen mit Drop-Down-Optionsmenüs zu verwenden, auch das bietet das Framework, ist es erforderlich, die mitgelieferte JavaScript-Datei einzubinden. jQuery wird nicht mitgeliefert, aber ebenfalls vorausgesetzt. Natürlich lassen sich alle Varianten kombinieren.

Zusätzlich enthält das Framework noch einige Wrapper, mit denen man beispielsweise die skeuomorphe Optik einer Türklingel nachbilden kann.

Buttons: Einfache CSS-Bibliothek zur Erstellung vielfältiger Schaltflächen

Wollen Sie sich mit den von Wolfe gelieferten Standards nicht zufrieden geben, benötigen Sie Sass und Compass nebst der entsprechenden Kenntnisse, um im Sourcecode rumzuschrauben. Wolfe erweitert sein Projekt allerdings ebenfalls kontinuierlich. Vielleicht tut es schon etwas Geduld.

So sehen die bisher verfügbaren Schaltflächen im Überblick aus:

Buttons: Einfache CSS-Bibliothek zur Erstellung vielfältiger Schaltflächen

Buttons steht auf Github zum kostenlosen Download und unter Apache Lizenz 2.0 zur kostenfreien Verwendung auch in kommerziellen Projekten zur Verfügung.

Links zum Beitrag

Dieter Petereit

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design.

4 Kommentare

  1. Die Farbe Purpur war in der Tat nur Königen und ziemlich reichen Leuten vorbehalten. Der Prozess um lila Farbe herzustellen war sehr aufwändig. Man musst dazu die Purpur-Schnecken zum einen aus dem Meer sammeln und dann richtig aufbereiten (zermahlen etc.) um dann am Ende lila Farbpigmente zu erhalten.

    Von daher nehme ich auch an, dass die lila Buttons daher „royal“ heissen.

  2. Also entweder schlug mein Ironiedetektor erheblich fehl, oder es war keine Vorhanden, daher eine Erklärung zum „Royal“:
    ———————————————-
    Zitat Wikipedia:
    „Im alten Rom war Purpur den Togen und einige Zeit sogar nur den Schärpen der Senatoren vorbehalten. Es war der Farbstoff der Toga von Triumphatoren und des Kaisers.“
    „Im Früh- und Hochmittelalter saßen die Hauptlieferanten der begehrten Purpurprodukte in der Stadt Konstantinopel. Auch hier war Purpur den Kaisern vorbehalten.“
    ———————————————-
    Daher rührt mit hoher Wahrscheinlichkeit die Bezeichnung Royal aufgrund des Lilafarbtons des Buttons, sprich ein Button in royaler Farbe.

    MfG

    • Danke für die Erläuterung. In der Tat war da keine Ironie vorhanden. Ist es tatsächlich Teil einer erwartbaren Allgemeinbildung, violett mit den alten Römern in Verbindung bringen zu können? Wenn ja, muss ich da Schwächen einräumen…

Schreibe einen Kommentar

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