Es ist eine minifiziert 8,6 Kilobyte große CSS-Datei, die ihr in eure Website einbinden müsst, um die Basis für ein konsistentes und nachvollziehbares Button-Management zu bekommen. Denn um nicht mehr oder weniger kümmert sich die CSS-Bibliothek Knopf.css von den Entwicklern hinter der Videokonferenz-Lösung Team-Video.

Ursprünglich für das Rapid Prototyping erdacht, eignet sich Knopf.css ebenso gut für Live-Projekte, bei denen Wert auf ein nachvollziehbares Schaltflächen-Design gelegt wird. Knopf.css kommt mit einer Reihe vordefinierter Stile, kann aber recht einfach angepasst und erweitert werden, wenn die grundlegende Syntax einmal verstanden ist. Dabei sollte natürlich auch bei eigenen Erweiterungen Wert auf die strikte Benennung gelegt werden.

Die Bibliothek ist im Einsatz sehr leicht zu erkennen, weil alle Schaltflächen mit der Klasse „Knopf“ und eventuellen Modifiern für unterschiedliche Zustände der Klasse ausgestattet sind. Knopf.css geht dabei sehr strukturiert vor und lässt euch die Basisklassen nach Wunsch anpassen, ohne dass sich das auf die Funktionsfähigkeit vorhandener Eigenschaften, Variablen oder Modifier auswirkt. Jeder Designer, der schon einmal mit CSS gearbeitet hat, wird den Ansatz problemlos verstehen.

Eine komplette Testumgebung findet ihr unter diesem Codepen. Hier könnt ihr ausprobieren, ob die Bibliothek eurem Arbeitsablauf entgegenkommt.

Knopf.css steht auf Github zum kostenlosen Download und zur freien Verwendung unter der MIT-Lizenz bereit. Die Bibliothek befindet sich in aktiver Entwicklung und liegt inzwischen in Version 1.0.9 vor. Wer sich beteiligen will, ist unter Nutzung der üblichen Github-Methoden jederzeit willkommen.

Passend dazu: Webdesign: Das sind die besten CSS-Features, die es nicht gibt