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!
Allgemeine Call-to-Action Buttons
Click me!
Click me! (2)
Liquid Fill
Some Text
Mehr erfahren (Learn more)
Learn more (2)
See the Pen Button Hover by Katherine Kato (@kathykato) on CodePen.light
Go!
Link zur Demo auf CodePen.light
Fancy Button
Link zur Demo auf CodePen.light
Submit
Link zur Demo auf CodePen.light
Animierte Hover-Effekte
Link zur Demo auf CodePen.light
Animierte Hover-Effekte (2)
Link zur Demo auf CodePen.light
Hover me (mit Emojis)
Link zur Demo auf CodePen.light
Hover me (2)
Link zur Demo auf CodePen.light
Hover over me
Link zur Demo auf CodePen.light
Hover over me (2)
Link zur Demo auf CodePen.light
Hover over me (3)
Link zur Demo auf CodePen.light
Button mit Hover-Effekt
Link zur Demo auf CodePen.light
Retro-Animationen
Link zur Demo auf CodePen.light
Liquid Button
Link zur Demo auf CodePen.light
Download-Buttons und Icons
Ein animiertes Download-Icon (1)
Link zur Demo auf CodePen.light
Ein animiertes Download-Icon (2)
Link zur Demo auf CodePen.light
Noch ein animiertes Download-Icon (3)
Link zur Demo auf CodePen.light
Ein weiteres animiertes Download-Icon (4)
Link zur Demo auf CodePen.light
Ein weiteres animiertes Download-Icon (5)
Link zur Demo auf CodePen.light
Ein hübsch animierter Download-Button
Link zur Demo auf CodePen.light
Noch ein nett animierter Download-Button
Link zur Demo auf CodePen.light
Social-Media Buttons
Vom Plus-Icon zum Menü
Link zur Demo auf CodePen.light
Follow me
Link zur Demo auf CodePen.light
Teilen auf dem Handy
Link zur Demo auf CodePen.light
Beitrag teilen
Link zur Demo auf CodePen.light
Beitrag teilen (2)
Link zur Demo auf CodePen.light
Favorisieren-Button
Link zur Demo auf CodePen.light
Ein Herz-Icon
Link zur Demo auf CodePen.light
Hover me-Button
Link zur Demo auf CodePen.light
Kauf-Knöpfe
Get Ticket
Link zur Demo auf CodePen.light
Get Ticket (2)
Link zur Demo auf CodePen.light
Kontaktieren-Buttons und Icons
Schick mir eine Email
Link zur Demo auf CodePen.light
Animierte Icons
Ein Icon zum Zuschliessen
Link zur Demo auf CodePen.light
Ein Plus-Icon zum Aufschliessen (und Zuschliessen)
Link zur Demo auf CodePen.light
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.
4 Kommentare zu “39 CSS-Buttons mit Hover-Effekt und den dazugehörigen Code-Schnippets”
WOW, Meeegaaa! Vielen Dank für die Bereitstellung 🙂
Cheers
Julia
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