Die besten CSS Buttons – mit hover Animationen
In dieser Sammlung möchte ich euch die schönsten CSS Buttons mit Animationen vorstellen. Buttons, egal ob groß oder klein, unauffällig oder „voll in die Fr***“, sind elementar wichtig für eine Webseite, denn sie sind in der Regel der Call to Action (CTA) für eine Interaktion des Besuchers. In den meisten Fällen der Kauf eines Produktes oder die Anmeldung oder oder. Es gibt unzählige Funktionen, aber meiner Erfahrung nach ziehen gut platzierte und coole CSS Buttons besser als lieblos platzierte CTA.
Wie jeder Webdesigner muss man das Rad nicht neu erfinden. Es reicht manchmal ein Blick nach rechts und links auf die Arbeit anderer Webdesigner, um sich Inspirationen zu holen. Daher finde ich es auch nicht verwerflich, wenn man ab und an auf die Arbeit anderer zurückgreift (auch auf meine 😉 ) und diese seinem Design oder Code anpasst. Im Laufe der Zeit habe ich mir eine kleine Sammlung animierter Buttons angelegt und diese möchte ich gerne mit euch teilen, denn darunter sind echt geile arbeiten.
Die meisten der Buttons in meiner Liste sind mit der MIT Lizenz versehen.
Da die MIT-Lizenz selbst nicht mit einem Copyright versehen ist, steht es jedem frei, die MIT-Lizenz für den eigenen Gebrauch zu modifizieren.
Mehr Informationen findet ihr hier.
CSS Sliced Button
Autor: Sarah
See the Pen
CSS Sliced Button by Sarah (@saraharaya)
on CodePen.
Sehr coole Slice Animation, der den Text halbiert.
Simple CSS Button Hover Effects
Autor: Dronca Raul
See the Pen
Simple CSS Button Hover Effects by Dronca Raul (@rauldronca)
on CodePen.
Gerade der Hovereffekt beim zweiten Button gefällt mir sehr gut.
Menu button to Hamburger – styled & animated with pure CSS
Autor: Yinxi Chen
See the Pen
Menu button to Hamburger – styled & animated with pure CSS by Yinxi Chen (@kaylolo)
on CodePen.
Eine Sammlung wirklich gelungener Menus, oder wie man auch so schön sagt – Hamburger Menus 🙂
CSS button hover
Autor: Danil Goncharenko
See the Pen
CSS button hover by Danil Goncharenko (@Danil89)
on CodePen.
Dezente Animation beim Hover
Flush button
Autor: Kamil
See the Pen
Flush button by Kamil (@KamilDyrek)
on CodePen.
Für mich ein wenig zu verspielt, aber man kann den Button bisschen modifizieren, dann wirkt die Animation sehr elegant und nicht mehr so aufdringlich.
Six Pure CSS Button Hover Animations
Autor: Christian
See the Pen
Six Pure CSS Button Hover Animations by Christian (@CTNieves)
on CodePen.
Hier gefällt mir vor allem der IDLE Button und die Rotation.
CSS Fizzy Button
Autor: Jamie Coulter
See the Pen
CSS Fizzy Button by Jamie Coulter (@jcoulterdesign)
on CodePen.
Schöne, sprudelnde und fröhliche Button Animation mit Bubbles.
CSS BUTTON HOVER
Autor: Imran Pardes
See the Pen
CSS BUTTON HOVER by Imran Pardes (@folaad)
on CodePen.
Moderner Button in Form eines Parallelogramms.
Candy Color Button Animation
Autor: Yuhomyan
See the Pen
Candy Color Button Animation by Yuhomyan (@yuhomyan)
on CodePen.
Eine wirklich schöne umfangreiche Sammlung dezenter animierter Buttons.
Welcher Button hat euch am besten gefallen? Oder habt ihr einen anderen Favoriten, der in meiner Liste fehlt? Dann lasst mir doch ein „Drunter-Kommi“ da. Auf jeden Fall werde ich die Sammlung suggestive erweitern. Ich freue mich über euren Input.
Hinterlasse doch ein Kommentar
Schreibe ein Kommentar zu Die besten CSS Buttons – mit hover Animationen
Wenn dir der Beitrag Die besten CSS Buttons – mit hover Animationen gefallen hat oder du Kritik bzw. Verbesserungsvorschläge hast, dann würde ich mich freuen, wenn Du ein Kommentar hinterlassen würdest.