Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

News

Butns – Schicke Schaltflächen aus reinem CSS

Butns: Im richtigen Leben verwendest du schließlich auch fertige Knöpfe. (Screenshot: t3n.de)

Die CSS-Bibliothek Butns bringt eine große Bandbreite möglicher Schaltflächen in deine Designs. Verschiedene Farben und verschiedene Button-Formen lassen kaum Wünsche öffen.

Ahmed Tarek: Du kannst alles erreichen, was du willst

Die CSS-Bibliothek, die Gegenstand dieses Beitrags sein wird, wurde erschaffen vom 15-jährigen Entwickler Ahmed Tarek aus Alexandria in Ägypten. Ahmed programmiert erst seit einem knappen Jahr und hat sich sämtliche Kenntnisse autodidaktisch über das Mozilla Developer Network und W3schools angeeignet.

Ahmed ist ein gutes Beispiel dafür, was passieren kann, wenn die Eigeninitiative groß genug ist. Mit Butns.css stellt er nun sein erstes, wie er es nennt, „richtiges Projekt” vor. Und das ist schon richtig gut gelungen.

Anzeige

Butns: Einfach zu verwendende Button-Bibliothek

Butns ist eine einfach zu verwendende CSS-Bibliothek, mit deren Hilfe du eine Vielfalt verschiedener Schaltflächen nur mit CSS erstellen kannst. Dazu ist es nicht erforderlich, sich in die Tiefen des CSS einzuarbeiten. Stattdessen arbeitet Butns mit Klassen.

Butns: CSS-Bibliothek aus Ägypten (Screenshot: t3n)

Um einem Element das Aussehen einer Schaltfläche zu geben, vergibst du einfach eine die vordefinierte Klasse .button. Um die Optik im Detail anzupassen, erweiterst du die Klassendefinition um weitere Konkretisierungen, etwa so:

<a class="button border-purple medium rounded" href="#">Button</a>

In diesem Falle würdest du eine Schaltfläche mit einer violetten Umrandung (border-purple) bekommen. Der Button wäre mittelgroß (medium), hätte die beliebte Pillenform (rounded) und sähe so aus:

Generell musst du dir Butns also wie ein Baukastensystem vorstellen. Es gibt zwölf Füllfarben, die du mit der Klasse fill-namederfarbe verwendest, also etwa fill-purple für einen vollflächig violetten Button. Die gleichen Farben kannst du für die Umrandung der Schaltflächen verwenden. Eine violette Umrandung erreichst du etwa mit border-purple.

Jede Farbe verfügt zusätzlich über die Varianten dark und whitish, etwa zu übersetzen mit dunkel und hell. Eine Schaltfläche in dunklem Violett definierst du mit fill-dark-purple, eine hellviolette mit fill-whitish-purple. Das funktioniert auch mit Umrandungen.

Neben diesen Möglichkeiten kannst du Schaltflächen auch mit einem Verlauf, also nicht mit einer Vollfarbe versehen. Die Definition ist einfach. Für einen violetten Verlauf im Button wählst du gradient-purple.

Schlussendlich kombinierst du die ganze Vielfalt noch mit einem oder mehreren der verschiedenen Button-Styles. Darunter findest du kleine, mittlere und große, solche mit Schlagschatten, halbtransparente und abgerundete. Auch diese Stile kannst du kombinieren. Um etwa einen mittelgroßen, halbtransparenten Button in Pillenform zu erhalten, würdest du button medium semi-transparent rounded verwenden.

Du siehst, die Verwendung ist wirklich in fünf Minuten verstanden.

Butns steht auf Github unter MIT-Lizenz bereit

Butns steht unter der liberalen MIT-Lizenz für die kostenfreie Nutzung in privaten, aber auch kommerziellen Projekten, etwa für Kundenaufträge, zur Verfügung. Herunterladen kannst du es auf Github. Die komprimierte Fassung wiegt knappe 13 KB, die unkomprimierte knappe 15 KB.

Butns.css beißt sich mit keinem der großen Frameworks, insbesondere nicht mit Bootstrap. Du kannst Butns.css demnach problemlos gemeinsam mit Bootstrap einsetzen. Die Klassen vertragen sich untereinander.

Butns.css muss natürlich vor der Verwendung in deine Seite eingebunden werden. Du lädst also die butns.min.css auf deinen Webspace hoch und linkst sie unter Pfadangabe in dein HTML. Das geht etwa so:

<link rel="stylesheet" href="pfad/zu/butns.min.css">

Nun kannst du an beliebiger Stelle deines Projektes mit den vordefinierten Schaltflächen aus Ahmed Tareks Butns-Projekt arbeiten. Viel Spaß dabei.

Finde einen Job, den du liebst

Bitte beachte unsere Community-Richtlinien

10 Reaktionen
Der Realist
Der Realist

Zitat:
"Dieter Petereit
06.02.2017, 17:16 Uhr
Weiterhin hast du missverstanden, dass es sich hier um eine Diskussion handelt. Ist aber nicht schlimm. Im Internet ist der Platz ja nicht knapp."

Huh?! Ist es eine Einbahnstraße?! Sie posten alles mögliche und man kann noch nicht mal drüber reden?! Nach dem Moto friss oder stirb. Willkommen im Web 2.0

Ich hab für Sie mal die Bedeutung von "Diskusion" gegooglt: "lebhaftes (oft kontrovers geführtes) Gespräch über ein Thema oder Problem." verstehe nicht warum eine Duskussion hier fehl am Platz sein sollte. Ist aber auch egal, den sobald das "Du" kommt und dann noch mit der Bemerkung: ist es mir zu persönlich und ich bin raus.

Es geht hier eh nicht mehr um das Thema.

Dieter Petereit
Dieter Petereit

Ich sage es mal ganz wertneutral:

Das Interesse an der Bibliothek im Allgemeinen und diesem Beitrag hier im Speziellen zeigt, dass es eine große Mehrheit derer gibt, die den Beitrag und die Library nicht so beurteilen, wie die paar Kommentatoren hier.

@Der Realist:

Der Beitrag dreht sich um eine CSS-Bibliothek. Ob der Ersteller 15 oder 105 ist, ist dabei nebensächlich und nur für den Kontext von Bedeutung.

Der Realist
Der Realist

Wenn es nicht wichtig wäre, hätte man es nicht erwähnt! Es wurde in dem Thema erwähnt, also gehört es genau so zur Diskussion wie die Bibliothek an sich.
Es soll ja das Alleinstellungsmerkmal der Bibliothek hervorheben, also das Besondere. Ich persönlich zweifele an dem "Besonderen".

Wenn ich jetzt den 1001en Pizza laden bei mir im Dorf aufmache und damit werbe, das die Tomaten besonders frisch aus meinem Garten stammen. Dann kann ich doch nicht verlangen, dass man über die Tomaten nicht diskutiert, weil ich ja Pizzen verkaufe...

Die allgemeinen Interessenten haben sich wohl irgendwo versteckt, von der Bibliothek, sowie von diesem Beitrag. Würde es zutreffen, hätte er bei soviel Hype auch ein paar Follower und Likes auf Facebook. An beides fehlt es.

Mit Kritik umgehen ist so eine Sache: entweder man kann es oder nicht :P

Dieter Petereit
Dieter Petereit

Weiterhin hast du missverstanden, dass es sich hier um eine Diskussion handelt. Ist aber nicht schlimm. Im Internet ist der Platz ja nicht knapp.

esistsoweit
esistsoweit

Denn Sinn von derartigen versteh ich nicht mehr, speziell in der heutigen Zeit!

Die Buttons können nichts, nicht mal Transitions sind dabei, wir haben hier nur Farb, Border Radien, mal mehr mal weniger sowie Grössen- und DAFÜR extra ein Stylesheet einbinden, wo die Rolle der "Above-The-Fold" Thematik heute eine grössere Rolle spielt als je zuvor und ich entsprechend abhandeln muss, nur um ein paar Button-Styles zu verwenden?!

Das ist doch 10mal schneller selber ins Css geschrieben als bis ich das alles abgehandelt habe?! Und vor allem: viiiiel performanter! - Die Summer aller Ladezeiten zählt, i.R. nicht ein einzelner btw

Für wen soll das sein? Wenn ich in dem Geschäft bin und nicht in der Lage bin so simple Styles schnell selber zu schreiben, über welchen Einsatz reden wir hier?!

Private Hobby CMS / Baukasten- Seiten wo die Betreiber keine CSS-Kenntnisse haben?

bin ja gespannt

Sebastian
Sebastian

Deinen Argumenten kann ich folgen.

Immerhin ist er 15 und hat es zu einem t3n Artikel geschafft. Marketing kann er also! ;)

esistsoweit
esistsoweit

ok, Punkt für den Macher, richtig ^^

Der Realist
Der Realist

ich zweifel daran, dass er erst 15 ist. Wahrscheinlich ist es alle nur eine Marketingkampagne einer Agentur.
Den:
- wer gerade erst seit einem Jahr angefangen hat zu programmieren, wird wohl kaum gleich seine Arbeit auf Git-Hub veröffentlichen. Er wird es höchstwahrscheinlich noch nicht mal kennen.
- bereits so viele Bibliotheken verwenden (siehe seine Homepage)
- wird noch nicht mal eine Homepage haben
- wer erst bei Facebook seit Juni 2016 angemeldet ist, wird es wohl nicht davor gekannt haben (das gerade in seinem alter) und dann gleich zum Programmierer
- usw.
ich habe nach zwei Minuten aufgehört zu suchen, da ich keinen Einziegen Beweis gefunden habe das er eine Genie ist. Sonder es deute eher alles drauf das es eine Marketing-Idee ist. Was auch wahrscheinlicher ist.

Ich wünschte mir die Presse von heute würde die Themen mehr hinterfragen und auf deren Wahrheitsgehalt überprüfen (Qualität), als alles mögliche nur weiterleiten um Besucher-Traffic zu generieren (Quantität).
Das wir bereits damit am Abgrund stehen, sieht man dadurch, dass selbst die Regierung sich einschalten muss um sowas zu regeln. (wobei die Regierung wahrscheinlich auch mehr an der heimlichen Zensur interessiert ist. Bin mal gespannt wie die das umsetzen und den Spagat zwischen Zensur und Wahrheit schaffen)

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Hinweis

Du hast gerade auf einen Provisions-Link geklickt und wirst in Sekunden weitergeleitet.

Bei Bestellung auf der Zielseite erhalten wir eine kleine Provision – dir entstehen keine Mehrkosten.


Weiter zum Angebot