Knopf.css: Diese Bibliothek sorgt für schicke Buttons in deinen Webdesigns
![Knopf.css: Diese Bibliothek sorgt für schicke Buttons in deinen Webdesigns Knopf.css: Diese Bibliothek sorgt für schicke Buttons in deinen Webdesigns](https://images.t3n.de/news/wp-content/uploads/2020/07/knopf-css-teaser.jpg?class=hero)
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.
Knopf.css produziert Knöpfe für Websites
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.
![](https://images.t3n.de/news/wp-content/uploads/2020/07/knopf-css.png?class=content)
Beispiele für mit Knopf.css erstellte Buttons. (Screenshot: t3n)
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.
Testfeld auf Codepen, Download per Github
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
Sehr gut das wird mir etwas Arbeit in der Zukunft ersparen