41 CSS-Buttons mit Hover-Effekt und den dazugehörigen Code-Schnippets

. . . Reklame

Möchten Sie ihr Geld in der WordPress-Welt verdienen? Dann bietet sich anstatt eines HTML-Editors der Einsatz eines Page Builders wie Elementor an. Mit diesem Tool werden Sie das Ziel professionelle Websites zu erstellen wesentlich schneller erreichen.

. . .

Für schön anzusehende CSS-Buttons benötigt es schon lange keine Grafiken mehr — sie lassen sich formen aus der Schönheit des geschriebenen Codes. Doch die Erstellung kann ganz schön knifflig werden, wenn du an eine umfassende Browser-Kompatibilität denkst. Wie gut, dass es fertige Code-Schnipsel und zahlreiche Beispiele dafür gibt. Und noch besser, dass wir heute die besten Beispiele auch gleich in diesem Beitrag präsentieren.

Anmerkung: Die Ladezeit dieses Beitrags ist aufgrund der vielen Beispiele deutlich höher als bei anderen Seiten. Bitte hab einen Augenblick Geduld, es lohnt sich!

Knopf

Symbol - Logo
Ob zum schnellen Testen oder in der Produktion: Mit der Knopf-CSS-Bibliothek lassen sich verschiedene Buttons im Nu einbetten.

Knopf ist eine CSS-Bibliothek zum einfachen Erstellen verschiedener Schaltflächenstile, die über CSS-Variablen an das Design Deiner Marke angepasst werden können.

Papierflugzeug-Button

Der “Paperplane“-Button von Aaron Ikers Stift faltet sich zusammen und fliegt mit ein wenig Hilfe von Greensock-JS sehr hübsch davon.

Anzeige

Neumorphische CSS-Radio-Buttons

Marke - Produktdesign
Wenn CSS-Buttons täuschend echt aussehen. Link zu Codepen. Screenshot: Dr. Web. Kreiert von halvves.com

Neumorphische CSS-Toggle-Buttons

Logo - Marke
Link zu Codepen. Screenshot: Dr. Web. Erschaffen von halvves.com

Hübsche CSS-Buttons mit bttn.css

Gefallen Ihnen die aktuellen Ghost-Buttons oder jene im Material Design? Egal welches Flat-Design-Konzept man bevorzugt, das kleine Stylesheet bttn.css hat mit Sicherheit die ein oder andere Schaltfläche 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

erzeugt man etwa mit den folgenden Klassenzuweisungen:

. . . Reklame

Schnelle Ladezeiten sind absolut wichtig. Google und der Leser honorieren das. Mit GeneratePress machen Sie Ihre WordPress-Website zum Rennboliden. Jetzt kostenlos installieren.

. . .
<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, man musst halt die sechs Farbklassen nachlesen, wenn man 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 Ihnen das für ein paar Buttons zu viel ist, kann man 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 man Wert auf eine konsistente Benutzerführung legst.

Sämtliche Parameter kann man bequem zusammenklicken und dann per Zwischenablage in dein Projekt schreiben. Auf der Seite des Konfigurators findest man 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 man so auch noch nicht überall findet.

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.

. . . Reklame

Unzufrieden mit dem Hoster, oder neue Website am Start? Setzen Sie auf Kinsta, dem Managed Hosting Provider. Kostenlose Demo.

. . .

Allgemeine Call-to-Action Buttons

Gradient Text Overlay Button

Ein Pen von Sarah Fossheim.

Click me!

Link zur Demo auf CodePen.

Click me! (2)

Link zur Demo auf CodePen.

Liquid Fill

Link zur Demo auf CodePen

Some Text

Link zur Demo auf CodePen.

Smash to Submit Button

Mit diesem Button von Aaron Iker muss man schon echt hart ran, um zum Ziel zu gelangen. Sie schaffen das! 😉

Mehr erfahren (Learn more)

Link zur Demo auf CodePen.

Learn more (2)

Go!

Alle Buttons sind für private und kommerzielle Zwecke freigegeben. Da sich Nutzungsbedingungen stets ändern können, solltest du vor der konkreten Verwendung die Lizenz noch einmal überprüfen. Sicher ist sicher.

6 Antworten

      1. Hi Markus,

        nicht so ganz 🙁 – bin auch ehrlich gesagt mit css nicht so fit.

        Also. mit „link“ kann ich die css ja laden, wirkt sich dann aber auf die gesamte Seite aus
        Ich suche aber, wenn überhaupt möglich, eine Lösung, dass die css eben nur auf dem div Auswirkungen hat.

        Hintergrund: Ich nutze ein Content System und will da nur eines der hier vorgestellten Buttons einbauen

Schreibe einen Kommentar

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

Inhaltsverzeichnis

Unser Newsletter...

bietet Ihnen nützliche Tipps, die Ihren Arbeitsalltag erleichtern.

Social Media

Meistgelesen

Weitere Kategorien

Passende Beiträge

Schiftarten auf Webseiten und in Logos erkennen.

Schriftarten auf einer Website erkennen

Die massive Verbreitung der Webfonts bringt es mit sich, dass Typografie auch im Netz immer aufwändiger wird. Als stets interessierter Developer kommt es daher immer häufiger vor, dass du wissen möchtest, welcher Font da eingesetzt worden ist. Auch im Printbereich wirst du regelmäßig mit dieser Frage konfrontiert.

Eine Frau mit Latte

Webdesign für eine erfolgreiche Website

Die Website ist die Visitenkarte Ihres Unternehmens. Doch sie ist noch viel mehr als das. Sie ist zentrales Kommunikationsinstrument und erste Anlaufstelle für potenzielle Neukunden. Diese erwarten aussagekräftige Inhalte und ein nutzerfreundliches Design. Wer bei der Onlinepräsenz Professionalität walten lässt, macht auf sich aufmerksam und gewinnt mehr Kunden.