Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
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 ande­res als um die ein­fa­che, aber vari­an­ten­rei­che Gestaltung von Schaltflächen auf Websites küm­mert. Buttons ent­steht unter Verwendung von Sass und Compass, wobei man von die­sen bei­den Begriffen nur dann etwas gehört haben muss, wenn man die Buttons-Bibliothek an sei­ne per­sön­li­chen Bedürfnisse anpas­sen will. Will man das nicht, rei­chen CSS-Grundkenntnisse…

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

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

Neun ver­schie­de­ne Button-Styles erstell­te Wolfe, dar­un­ter auch einen Satz im belieb­ter wer­den­den Flat Design. Die Verwendung aller ver­füg­ba­ren Varianten ist sehr ein­fach. Hierzu bedarf es ledig­lich des Befolgens der vor­ge­ge­be­nen Syntax. Button-Styles wer­den als Klassen über­ge­ben. Wolfe hat sich dabei dafür ent­schie­den, nor­mal sprach­li­che Bezeichnungen zu ver­wen­den. Darüber lässt sich strei­ten. Grundsätzlich zei­gen sich alle vir­teul­len Knöpfe in die­sem Farbschema:

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

Wieso die far­bi­gen Buttons nun auf die Bezeichner primary, action, highlight, caution und royal hören, ist letzt­lich nicht voll­stän­dig nach­voll­zieh­bar. Insbesondere die Kombination des Bezeichners royal mit der Farbe Violett gibt mir doch Rätsel auf. Aber gut, betrach­ten wir es als eine Art Vokabeln. Die muss man nicht ver­ste­hen, die muss man nur wis­sen.

Neben den Knöpfen im Flat Design gibt es noch wel­che mit Glow-Effekt (einem far­bi­gen Schein außen rum), gewölb­te, run­de und etli­che mehr. Will man Icons inner­halb der Elemente ein­set­zen, ist es erfor­der­lich, Font Awesome mit ein­zu­bin­den. Die erfor­der­li­chen Dateien wer­den mit­ge­lie­fert.

Um Schaltflächen mit Drop-Down-Optionsmenüs zu ver­wen­den, auch das bie­tet das Framework, ist es erfor­der­lich, die mit­ge­lie­fer­te JavaScript-Datei ein­zu­bin­den. jQuery wird nicht mit­ge­lie­fert, aber eben­falls vor­aus­ge­setzt. Natürlich las­sen sich alle Varianten kom­bi­nie­ren.

Zusätzlich ent­hält das Framework noch eini­ge Wrapper, mit denen man bei­spiels­wei­se die skeuomor­phe Optik einer Türklingel nach­bil­den kann.

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

Wollen Sie sich mit den von Wolfe gelie­fer­ten Standards nicht zufrie­den geben, benö­ti­gen Sie Sass und Compass nebst der ent­spre­chen­den Kenntnisse, um im Sourcecode rum­zu­schrau­ben. Wolfe erwei­tert sein Projekt aller­dings eben­falls kon­ti­nu­ier­lich. Vielleicht tut es schon etwas Geduld.

So sehen die bis­her ver­füg­ba­ren Schaltflächen im Überblick aus:

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

Buttons steht auf Github zum kos­ten­lo­sen Download und unter Apache Lizenz 2.0 zur kos­ten­frei­en Verwendung auch in kom­mer­zi­el­len 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 ziem­lich rei­chen Leuten vor­be­hal­ten. Der Prozess um lila Farbe her­zu­stel­len war sehr auf­wän­dig. Man musst dazu die Purpur-Schnecken zum einen aus dem Meer sam­meln und dann rich­tig auf­be­rei­ten (zer­mah­len etc.) um dann am Ende lila Farbpigmente zu erhal­ten.

    Von daher neh­me ich auch an, dass die lila Buttons daher “roy­al” heis­sen.

  2. Also ent­we­der schlug mein Ironiedetektor erheb­lich fehl, oder es war kei­ne Vorhanden, daher eine Erklärung zum “Royal”:
    ———————————————-
    Zitat Wikipedia:
    “Im alten Rom war Purpur den Togen und eini­ge Zeit sogar nur den Schärpen der Senatoren vor­be­hal­ten. Es war der Farbstoff der Toga von Triumphatoren und des Kaisers.”
    “Im Früh- und Hochmittelalter saßen die Hauptlieferanten der begehr­ten Purpurprodukte in der Stadt Konstantinopel. Auch hier war Purpur den Kaisern vor­be­hal­ten.”
    ———————————————-
    Daher rührt mit hoher Wahrscheinlichkeit die Bezeichnung Royal auf­grund des Lilafarbtons des Buttons, sprich ein Button in roya­ler Farbe.

    MfG

    • Danke für die Erläuterung. In der Tat war da kei­ne Ironie vor­han­den. Ist es tat­säch­lich Teil einer erwart­ba­ren Allgemeinbildung, vio­lett mit den alten Römern in Verbindung brin­gen zu kön­nen? Wenn ja, muss ich da Schwächen ein­räu­men…

Schreibe einen Kommentar

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