Anzeige
Der Agentur-Server: Das digitale Zuhause für deine Projekte.
↬ Jetzt testen ↬ Jetzt testen!
Markus Seyfferth 1. Oktober 2019

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

Ein lila Kaufknopf mit der Aufschrift Liquid Button

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!

Link zur Demo auf CodePen.light

Click me! (2)

Link zur Demo auf CodePen.light

Some Text

Link zur Demo auf CodePen.light

Liquid Fill

Link zur Demo auf CodePen.light

Mehr erfahren (Learn more)

Link zur Demo auf CodePen.light

Learn more (2)

Link zur Demo auf 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

Hover over me (4)

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.

Markus Seyfferth

Markus Seyfferth

Markus leitet seit April 2019 die Geschicke von Dr. Web, und ist dabei, einige interessante neue Projekte in Angriff zu nehmen. Zuvor war er für mehr als 6 Jahre der Geschäftsführer und Vorstand vom Smashing Magazine, der englischsprachigen Schwesterpublikation von Dr. Web.

Ein Kommentar

  1. Tolle Auflistung, ein paar habe ich mir direkt abgespeichert. Besonders die SVG Animationen sind natürlich beeindruckend. VG

Schreibe einen Kommentar

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