CSS: Hübsche Buttons mit bttn.css

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren...

Gefallen dir die aktuellen Ghost-Buttons oder jene im Material Design? Egal welches Flat-Design-Konzept du bevorzugst, das kleine Stylesheet bttn.css hat mit Sicherheit die ein oder andere Schaltfläche für dich parat.

bttn.css: 13 verschiedene Flat-Style-Schaltflächen

Buttons in reinem CSS sind das Mittel der Wahl für moderne Schaltflächen. Das Stylesheet bttn.css macht die Erstellung äußerst ansprechender Knöpfe sehr einfach. Es bedarf nur der Vergabe entsprechend vordefinierter Klassen.

Den folgenden Button

bttn.css

erzeugst du etwa mit den folgenden Klassenzuweisungen:

<button class="bttn-slant bttn-lg bttn-success">large</button>

Wesentlich einfacher wird es nicht. bttn.css kommt mit dreizehn Buttons in sechs Farben und vier Größen. Jeder Parameter wird als zusätzliche Klasse angehängt. Die Farbdefinitionen hätte der Entwickler durchaus sprechender gestalten können. Auf bttn-success für Grün kann man ja noch kommen, aber bttn-royal für Violett oder bttn-warning für Orange erfordert unnötigerweise ein Abstraktionsvermögen, dass auch nicht überall auf der Welt zu den richtigen Assoziationen führen wird. Seis drum, du musst halt die sechs Farbklassen nachlesen, wenn du sie verwenden willst.

bttn.css, geringes Dateigewicht und flexibler Einsatz

bttn.css ist komprimiert noch rund 32kb groß, in lesbarer Form wiegt es 42kb. Wenn dir das für ein paar Buttons zu viel ist, kannst du auch das CSS für jeden Button separat herunterladen. So bringen die Buttons etwa 6kb das Stück auf die Waage. In der Regel wird ein Button pro Projekt reichen, wenn du Wert auf eine konsistente Benutzerführung legst.

Kennst du unser E-Book-Bundle? Spare jetzt 6,99 €!

E-Book Bundle von Andreas Hecht

Sämtliche Parameter kannst du bequem zusammenklicken und dann per Zwischenablage in dein Projekt schreiben. Auf der Seite des Konfigurators findest du auch die Download-Möglichkeit für die separaten CSS-Dateien. Zusätzlich zu ihrer modernen Form bringen die Schaltflächen zeitgemäße Animationseffekte mit, die du so auch noch nicht überall findest.

bttn.css

bttn.css wird erstellt und gepflegt von Ganapati Bhat, einem Frontend-Entwickler aus dem indischen Bangalore. Das Projekt steht zur freien Verwendung unter der liberalen MIT-Lizenz auf Github zur Verfügung. Bhat veröffentlichte die initiale Version Anfang November 2016 und ist seitdem aktiv geblieben. Dadurch hat es sein Projekt geschafft, bei ProductHunt gefeatured zu werden und auf Github zu trenden.

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. Man findet ihn auch auf Twitter und Google+.

Hinterlasse einen Kommentar

1 Kommentar auf "CSS: Hübsche Buttons mit bttn.css"

Benachrichtige mich zu:
avatar
Sortiert nach:   neueste | älteste | beste Bewertung
Christian
Gast

WOW, die Buttons kannte ich noch gar nicht 🙂 Danke für den Denkanstoß. Ich werde mir die Buttons auf jeden Fall mal anschauen und testen 🙂

wpDiscuz