65 coole CSS Buttons – mit Animationen!

CSS Buttons sind ein wichtiger Bestandteil des Webdesigns, da sie nicht nur die Benutzerfreundlichkeit verbessern, sondern auch das Aussehen und die Ästhetik der Website beeinflussen. In diesem Artikel findest du eine Sammlung der besten CSS-Buttons.
Ob dick und fett auf deiner Startseite oder klein und dezent im Footer, Buttons sind für den Nutzerfluss auf deiner Website ein sehr wichtiges Designelement. Für eine Firmenwebsite wird oft auf ein dezenteres Design gesetzt, wohin gegen bei kreativen Branchen eher etwas auffälligere und „schrille“ Buttons genutzt werden. Damit alle Branchen gleichermaßen bedient sind, findest du hier ganz viele verschiedene Button Styles.
Auch auf Animationen beim Hover oder Focus lege ich – und viele andere Webentwickler/designer – viel Wert, weshalb alle der folgenden Buttons auch jeweils schöne Animationen mitbringen. Aber nun starten wir direkt!
Die gezeigten Pens sind mit MIT lizensiert. Mehr Infos zur eigenen Nutzung findest Du im Codepen Blog.
#1 Hover Glow Effect
Autor: Kocsten;
Programmiert in: HTML, CSS;
#2 Rounded Button
Autor: alticreation;
Programmiert in: HTML, CSS (SCSS);
#3 Blubby Button
Autor: Nour Saud;
Programmiert in: HTML, CSS;
#4 Icon buttons
Autor: Andrea Maselli;
Programmiert in: HTML, CSS;
#5 Blobs button
Autor: Hilary;
Programmiert in: HTML, CSS (SCSS);
#6 Thin Buttons
Autor: Natalia Reshetnikova;
Programmiert in: HTML, CSS;
#7 Bootstrap Buttons
Autor: dew31794;
Programmiert in: HTML, CSS (SCSS), JS;
#8 Rounded Pulse Button
Autor: Raj Kamal;
Programmiert in: HTML, CSS (SCSS);
#9 CSS Fizzy Button
Autor: Jürgen Leister;
Programmiert in: HTML (Haml), CSS (SCSS);
#10 Button N° 045
Autor: Vitor Siqueira;
Programmiert in: HTML, CSS;
#11 Flush button
Autor: AbhishekBaiju;
Programmiert in: HTML, CSS;
#12 Button Concept
Autor: Shyam;
Programmiert in: HTML, CSS (SCSS), JS (CoffeeScript);
#13 Sliced Button
Autor: Sarah;
Programmiert in: HTML, CSS;
#14 More fancy Icon buttons
Autor: Ishaan Saxena;
Programmiert in: HTML (Pug), CSS (SCSS);
#15 Button Change
Autor: thelaazyguy;
Programmiert in: HTML, CSS;
#16 Simple Button
Autor: Tiberiu Raducea;
Programmiert in: HTML, CSS (SCSS);
#17 Button Flip
Autor: Alex Moore;
Programmiert in: HTML, CSS (SCSS);
#18 Swipe Right Button
Autor: thelaazyguy;
Programmiert in: HTML, CSS;
#19 Fancy Buttons
Autor: Alexandre do Vale;
Programmiert in: HTML, CSS, JS;
#20 FlipCover Buttons
Autor: Velina V Veleva;
Programmiert in: HTML, CSS (SCSS), JS;
#21 Collection of Button Hover Effects
Autor: David Conner;
Programmiert in: HTML, CSS (SCSS);
#22 CSS Button Effect: Animated Border & Glow
Autor: Blade Multimedia;
Programmiert in: HTML, CSS;
#23 CSS Button Hover
Autor: Imran Pardes;
Programmiert in: HTML, CSS;
#24 Still in View
Autor: Alex Bodin;
Programmiert in: HTML, CSS;
#25 Pure CSS Button with Ring Indicator
Autor: Cole McCombs;
Programmiert in: HTML, CSS;
#26 Button Hover Effects
Autor: Kyle Brumm;
Programmiert in: HTML, CSS (SCSS), JS;
#27 Button bubble effect
Autor: Adrien Grsmto;
Programmiert in: HTML, CSS (SCSS), JS;
#28 Animation Submit Button
Autor: Valentin Galmand;
Programmiert in: HTML, CSS (SCSS), JS;
#29 Who doesn’t like Fun Buttons?
Autor: Derek Morash;
Programmiert in: HTML, CSS (SCSS);
#30 Flipside
Autor: Hakim El Hattab;
Programmiert in: HTML, CSS (SCSS), JS;
#31 Squishy Toggle Buttons
Autor: Justin Windle;
Programmiert in: HTML, CSS (Sass);
#32 Button hover effect with box-shadow
Autor: Giana;
Programmiert in: HTML, CSS (SCSS);
#33 Submit Button (Anime.js)
Autor: Andrew Millen;
Programmiert in: HTML, CSS (SCSS), JS (jQuery & anime.js);
#34 CSS Button Animation
Autor: Sasha;
Programmiert in: HTML (Pug), CSS (SCSS), JS;
#35 CSS Button on Plaid
Autor: Marcus Connor;
Programmiert in: HTML, CSS;
#36 CSS button with bubbles
Autor: Giana;
Programmiert in: HTML, CSS (SCSS);
#37 jQuery +3D css button
Autor: Carlos G Notario;
Programmiert in: HTML, CSS, JS (jQuery);
#38 Pure CSS button switch
Autor: Kitty Giraudel;
Programmiert in: HTML, CSS (SCSS);
#39 Creative Button Hover Collection
Autor: Yasin Softaoğlu;
Programmiert in: HTML, CSS;
#40 CSS Button Animations
Autor: Alex Loomer;
Programmiert in: HTML, CSS;
#41 CSS Button with Hover Effect
Autor: Kniw Studio;
Programmiert in: HTML, CSS;
#42 Button Practice
Autor: Ivan Villa;
Programmiert in: HTML, CSS (SCSS);
#43 CSS Button Design Animation
Autor: ABlimits Studio;
Programmiert in: HTML, CSS;
#44 Six pure CSS Button Hover Animations
Autor: Christian;
Programmiert in: HTML, CSS;
#45 3D CSS BUTTON
Autor: SULEMANS CODES;
Programmiert in: HTML, CSS, JS;
#46 70s CSS Button
Autor: Jordan Halvorsen;
Programmiert in: HTML, CSS;
#47 100 days css Button N° 045
Autor: Vitor Siqueira;
Programmiert in: HTML, CSS;
#48 Button Hover
Autor: Katherine Kato;
Programmiert in: HTML, CSS (SCSS);
#49 Download Button Animation
Autor: Aaron Iker;
Programmiert in: HTML, CSS (SCSS), JS (gsap);
#50 Liquid button
Autor: Waaark;
Programmiert in: HTML, CSS, JS (jQuery);
#51 Awesome Buttons
Autor: Astitva2009;
Programmiert in: HTML, CSS;
#52 Awesome Button Hover Effect
Autor: Devang Bajpai;
Programmiert in: HTML, CSS;
#53 CSS Button Hover Effect INK
Autor: morgasmatron;
Programmiert in: HTML, CSS (SCSS);
#54 Button hover with slide animation
Autor: Ajeet Kumar;
Programmiert in: HTML, CSS;
#55 70s CSS Button
Autor: halvo;
Programmiert in: HTML, CSS;
#56 Button Love #4 – 2019
Autor: punit chawla;
Programmiert in: HTML, CSS (SCSS);
#57 CSS Button Animation
Autor: Yohaan Chokhany;
Programmiert in: HTML, CSS, JS;
#58 CSS Button Pending/Success/Fail Animation
Autor: Felix M.;
Programmiert in: HTML, CSS (SCSS), JS (Babel);
#59 CSS Button transitions
Autor: Robin Treur;
Programmiert in: HTML, CSS (SCSS);
#60 Neon Buttons
Autor: Np|Nihad Pasa;
Programmiert in: HTML, CSS;
#61 Pure CSS button hover animation
Autor: afa;
Programmiert in: HTML, CSS (SCSS);
#62 Home Button Hover Effect #03
Autor: Eslam;
Programmiert in: HTML, CSS;
#63 Css Button Hover #1 – Stretchable Button
Autor: thelaazyguy;
Programmiert in: HTML, CSS;
#64 Supah Awesome CSS Button
Autor: Kyle Lavery;
Programmiert in: HTML, CSS (SCSS);
#65 Pure CSS Button fill effects
Autor: Pieter Biesemans;
Programmiert in: HTML, CSS (SCSS);
Fazit
Welcher gefällt Dir am besten? Wenn Du auch Buttons auf Codepen veröffentlicht hast, lass es mich gerne wissen, damit ich diese Liste erweitern kann! 🙂
Hinweis: Alle Buttons sind alle auf codepen.io veröffentlicht und nicht von mir.
Noch nicht genug? Dann könnte das etwas für Dich sein:
Wie fandest du diesen Beitrag?


Vielen lieben Dank für diese reichhaltige CSS Sammlung. Das Ein oder Andere, habe ich auf meiner Seite in leicht abgewandelter Form gleich ausprobiert. Wunderbar.
Das freut mich! 🙂
Wahnsinn, was heute allein mit CSS möglich ist. Es ist nicht lange her, da hätte man Flash oder GIF für diese Aufgaben verwenden müssen. Die gezeigten Button-Beispiele sind wirklich sehr nice, danke!
Das stimmt, vielen Dank! 🙂