42 CSS Buttons mit Hover-Effekt & Code Snippets
Markus Seyfferth
Autor Dr. WebDas <button> Element ist für die Benutzerinteraktion konzipiert, um Beispielsweise ein Kontaktformular abzusenden, etwas hoch- oder herunterzuladen oder um etwas zu „liken“. Mithilfe von Tastatur, Maus, „Touch“ oder gar per Sprachbefehl kann ein sogenanntes click Event ausgelöst werden, welches die Interaktion auslöst.
Jeder Browser bringt seine eigenen Standard-Styles für das Button-Element mit sich, so dass sie direkt und ohne Anpassung verwenden werden können. Im Folgenden wollen wir uns verschiedene Beispiele ansehen, wie du die Buttons noch aufpeppen kannst.
Pure CSS Gravity Button
Link zum Pure CSS gravity button von Ana Tudor.
Barrierefreie Buttons
Ein Überblick über die Erstellung barrierefreier Buttons, welche sowohl im Dark Mode als auch im Light Mode funktionieren. Link zum Artikel von Adam Argyle und zum Source Code auf Github.
3D-Button
Josh Comeaus Tutorial featured nicht nur einen richtig schönen Button, auch seine Erklärungen sind einfach zu verstehen und mit einigen interaktiven Elementen versehen.
Hier der 3D-Button mitsamt dem dazugehörigen HTML & CSS:
Hier das CSS zum 3D-Button
Und hier das HTML zum 3D-Button
Knopf
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.
Neumorphische CSS-Radio-Buttons
Neumorphische CSS-Toggle-Buttons
Allgemeine Call-to-Action Buttons
Gradient Text Overlay Button
Ein Pen von Sarah Fossheim.
Click me!
Click me! (2)
Liquid Fill
Some Text
Smash to Submit Button
Mehr erfahren (Learn more)
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.
-
Was kostet Webdesign wirklich? Mehr als Sie denken, weniger als es sollte.
Sie haben gerade gegoogelt, was eine Website kostet. Die Ergebnisse sind verwirrend. 500 Euro hier, 50.000 Euro dort. Und irgendwo dazwischen die Wahrheit, die niemand so recht aussprechen will: Der Preis Ihrer…
-
Was kostet Webdesign wirklich? Mehr als Sie denken, weniger als es sollte.
Sie haben gerade gegoogelt, was eine Website kostet. Die Ergebnisse sind verwirrend. 500 Euro hier, 50.000 Euro dort. Und irgendwo dazwischen… -
Media Queries: Mobile Versionen von Websites mit CSS3 erstellen
CSS Media Queries sind ein Thema, das Webdesigner und -entwickler nach wie vor begeistert und frustriert. So nutzen Sie Media Queries,… -
Website fürs KI-Startup: Selbst bauen, outsourcen oder hybrid?
2026 gründen mehr Menschen KI-Startups als je zuvor. Die Website soll in einer Woche stehen, das Budget ist knapp, und der… -
Schlechte Websites? Oh, ja! Top 10 aus der Internet-Steinzeit
An zahllosen Stellen im Web und auch in diesem Magazin ist immer wieder die Rede von der Bedeutung von Usability und…
Zum Newsletter anmelden
Kommen Sie wie über 6.000 andere Abonnenten in den Genuss des Dr. Web Newsletters. Als Dankeschön für Ihre Anmeldung erhalten Sie das große Dr. Web Icon-Set: 970 Icons im SVG-Format – kostenlos.
8 Antworten zu „42 CSS Buttons mit Hover-Effekt & Code Snippets“
Sehr informativer Beitrag, vielen Dank
Vielen lieben Dank für diese Mega-Buttonsammlung!
Wirklich tolle Button Kollektion! Erspart mir eines an Zeit bei einigen Projekten, vielen Dank dafür!
Wahnsinns gute Button! 🙂 Danke fürs Teilen!
Hallo, jemand eine Idee, wie ich das hinbekomme, dass die CSS nur auf den Hover Button angeand wird und nicht gleich auf die ganze Seite
Hallo Klaus, vielleicht hilft Dir ja einer der CSS-Selektoren weiter?
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
WOW, Meeegaaa! Vielen Dank für die Bereitstellung 🙂
Cheers
Julia