50 cool CSS Buttons – with Animations!

Buttons are not only good for usability, but also an extremely important design element for your website. For this reason, here is a collection of the best CSS buttons!

Whether thick and bold on your homepage or small and discreet in the footer, buttons are a very important design element for the user flow on your website. For a company website, a more discreet design is often used, whereas creative industries use more eye-catching and “weird” CSS buttons. So that all industries are equally served, you will find many different styles and combinations here.

I – and many other web developers/designers – also set a high value on animations for Hover or Focus, which is why all of the following buttons bring along nice animations. But now we start directly!

The pens shown are licensed with MIT. You can find more info about your own use on the Codepen Blog.

#1 Hover Glow Effect

See the Pen Чистый CSS Button Hover Glow Effect by Kocsten (@kocsten) on CodePen.

Author: Kocsten;
Coded in: HTML, CSS;

#2 Rounded Button

See the Pen Pure Css Button Hover effect by alticreation (@alticreation) on CodePen.

Author: alticreation;
Coded in: HTML, CSS (SCSS);

#3 Blubby Button

See the Pen Bubbly Button by Nour Saud (@nourabusoud) on CodePen.

Author: Nour Saud;
Coded in: HTML, CSS;

#4 Icon buttons

See the Pen Icon buttons by Andrea Maselli (@andrea-maselli) on CodePen.

Author: Andrea Maselli;
Coded in: HTML, CSS;

#5 Blobs button

See the Pen Blobs button by Hilary (@hilwat) on CodePen.

Author: Hilary;
Coded in: HTML, CSS (SCSS);

#6 Thin Buttons

See the Pen Simple CSS Button Hover Effects by Natalia Reshetnikova (@natalia-reshetnikova) on CodePen.

Author: Natalia Reshetnikova;
Coded in: HTML, CSS;

#7 Bootstrap Buttons

See the Pen Pure CSS Button Loader | Bootstrap 4 | SCSS by dew31794 (@dew31794) on CodePen.

Author: dew31794;
Coded in: HTML, CSS (SCSS), JS;

#8 Rounded Pulse Button

See the Pen CSS Button With Hover Effect by Raj Kamal (@avvign) on CodePen.

Author: Raj Kamal;
Coded in: HTML, CSS (SCSS);

#9 CSS Fizzy Button

See the Pen CSS Fizzy Button by Jürgen Leister (@webLeister) on CodePen.

Author: Jürgen Leister;
Coded in: HTML (Haml), CSS (SCSS);

#10 Button N° 045

See the Pen 100 days css Button N° 045 by Vitor Siqueira (@vitor-siqueira) on CodePen.

Author: Vitor Siqueira;
Coded in: HTML, CSS;

#11 Flush button

See the Pen Flush button by AbhishekBaiju (@abhishekbaiju) on CodePen.

Author: AbhishekBaiju;
Coded in: HTML, CSS;

#12 Button Concept

See the Pen Button Concept by Shyam (@Shtam3x) on CodePen.

Author: Shyam;
Coded in: HTML, CSS (SCSS), JS (CoffeeScript);

#13 Sliced Button

See the Pen CSS Sliced Button by Sarah (@saraharaya) on CodePen.

Author: Sarah;
Coded in: HTML, CSS;

#14 More fancy Icon buttons

See the Pen Pure CSS Buttons by Ishaan Saxena (@ishaansaxena) on CodePen.

Author: Ishaan Saxena;
Coded in: HTML (Pug), CSS (SCSS);

#15 Button Change

See the Pen Css Button Hover #5 by thelaazyguy (@thelaazyguy) on CodePen.

Author: thelaazyguy;
Coded in: HTML, CSS;

#16 Simple Button

See the Pen CSS button by Tiberiu Raducea (@tyberiu88) on CodePen.

Author: Tiberiu Raducea;
Coded in: HTML, CSS (SCSS);

#17 Button Flip

See the Pen Auto Width Css Button Flip by Alex Moore (@MoorLex) on CodePen.

Author: Alex Moore;
Coded in: HTML, CSS (SCSS);

#18 Swipe Right Button

See the Pen Css Button Hover #2 – Background by thelaazyguy (@thelaazyguy) on CodePen.

Author: thelaazyguy;
Coded in: HTML, CSS;

#19 Fancy Buttons

See the Pen CSS Button Effect by Alexandre do Vale (@alexandrevale) on CodePen.

Author: Alexandre do Vale;
Coded in: HTML, CSS, JS;

#20 FlipCover Buttons

See the Pen FlipCover CSS Mixin by Velina V Veleva (@vveleva) on CodePen.

Author: Velina V Veleva;
Coded in: HTML, CSS (SCSS), JS;

#21 Collection of Button Hover Effects

See the Pen Collection of Button Hover Effects by David Conner (@davidicus) on CodePen.

Author: David Conner;
Coded in: HTML, CSS (SCSS);

#22 CSS Button Effect: Animated Border & Glow

See the Pen CSS Button Effect: Animated Border & Glow. by Blade Multimedia (@AnthonyBmm) on CodePen.

Author: Blade Multimedia;
Coded in: HTML, CSS;

#23 CSS Button Hover

See the Pen CSS BUTTON HOVER by Imran Pardes (@folaad) on CodePen.

Author: Imran Pardes;
Coded in: HTML, CSS;

#24 Still in View

See the Pen XWrqpxB by Alex Bodin (@Alexb98) on CodePen.

Author: Alex Bodin;
Coded in: HTML, CSS;

#25 Pure CSS Button with Ring Indicator

See the Pen Pure CSS Button with Ring Indicator by Cole McCombs (@mccombsc) on CodePen.

Author: Cole McCombs;
Coded in: HTML, CSS;

#26 Button Hover Effects

See the Pen Button Hover Effects by Kyle Brumm (@kjbrum) on CodePen.

Author: Kyle Brumm;
Coded in: HTML, CSS (SCSS), JS;

#27 Button bubble effect

See the Pen Button bubble effect by Adrien Grsmto (@Grsmto) on CodePen.

Author: Adrien Grsmto;
Coded in: HTML, CSS (SCSS), JS;

#28 Animation Submit Button

See the Pen animation submit button by Valentin Galmand (@valentingalmand) on CodePen.

Author: Valentin Galmand;
Coded in: HTML, CSS (SCSS), JS;

#29 Who doesn’t like Fun Buttons?

See the Pen CSS BUTTONS!! by Derek Morash (@derekmorash) on CodePen.

Author: Derek Morash;
Coded in: HTML, CSS (SCSS);

#30 Flipside

See the Pen Flipside by Hakim El Hattab (@hakimel) on CodePen.

Author: Hakim El Hattab;
Coded in: HTML, CSS (SCSS), JS;

#31 Squishy Toggle Buttons

See the Pen Squishy Toggle Buttons by Justin Windle (@soulwire) on CodePen.

Author: Justin Windle;
Coded in: HTML, CSS (Sass);

#32 Button hover effect with box-shadow

See the Pen Button hover effects with box-shadow by Giana (@giana) on CodePen.

Author: Giana;
Coded in: HTML, CSS (SCSS);

#33 Submit Button (Anime.js)

See the Pen Submit Button (Anime.js) by Andrew Millen (@andrewmillen) on CodePen.

Author: Andrew Millen;
Coded in: HTML, CSS (SCSS), JS (jQuery & anime.js);

#34 CSS Button Animation

See the Pen CSS Button Animation by Sasha (@sashatran) on CodePen.

Author: Sasha;
Coded in: HTML (Pug), CSS (SCSS), JS;

#35 CSS Button on Plaid

See the Pen CSS Button on Plaid by Marcus Connor (@marcusconnor) on CodePen.

Author: Marcus Connor;
Coded in: HTML, CSS;

#36 CSS button with bubbles

See the Pen CSS button with bubbles by Giana (@giana) on CodePen.

Author: Giana;
Coded in: HTML, CSS (SCSS);

#37 jQuery +3D css button

See the Pen jQuery +3D css button by Carlos G Notario (@CarlosGNotario) on CodePen.

Author: Carlos G Notario;
Coded in: HTML, CSS, JS (jQuery);

#38 Pure CSS button switch

See the Pen Pure CSS button switch by Kitty Giraudel (@KittyGiraudel) on CodePen.

Author: Kitty Giraudel;
Coded in: HTML, CSS (SCSS);

#39 Creative Button Hover Collection

See the Pen Creative Button Hover Collection by Yasin Softaoğlu (@ysoftaoglu) on CodePen.

Author: Yasin Softaoğlu;
Coded in: HTML, CSS;

#40 CSS Button Animations

See the Pen CSS Button Animations by Alex Loomer (@atloomer) on CodePen.

Author: Alex Loomer;
Coded in: HTML, CSS;

#41 CSS Button with Hover Effect

See the Pen CSS Button with Hover Effect by Kniw Studio (@JeremyWink) on CodePen.

Author: Kniw Studio;
Coded in: HTML, CSS;

#42 Button Practice

See the Pen Button Practice by Ivan Villa (@ivillacreative) on CodePen.

Author: Ivan Villa;
Coded in: HTML, CSS (SCSS);

#43 CSS Button Design Animation

See the Pen CSS BUTTON DESIGN ANIMATION by ABlimits Studio (@ablimits) on CodePen.

Author: ABlimits Studio;
Coded in: HTML, CSS;

#44 Six pure CSS Button Hover Animations

See the Pen Six Pure CSS Button Hover Animations by Christian (@CTNieves) on CodePen.

Author: Christian;
Coded in: HTML, CSS;

#45 3D CSS BUTTON

See the Pen 3D CSS BUTTON by SULEMANS CODES (@coding-with-SR) on CodePen.

Author: SULEMANS CODES;
Coded in: HTML, CSS, JS;

#46 70s CSS Button

See the Pen 70s CSS Button by Jordan Halvorsen (@halvo) on CodePen.

Author: Jordan Halvorsen;
Coded in: HTML, CSS;

#47 100 days css Button N° 045

See the Pen 100 days css Button N° 045 by Vitor Siqueira (@vitor-siqueira) on CodePen.

Author: Vitor Siqueira;
Coded in: HTML, CSS;

#48 Button Hover

See the Pen Button Hover by Katherine Kato (@kathykato) on CodePen.

Author: Katherine Kato;
Coded in: HTML, CSS (SCSS);

#49 Download Button Animation

See the Pen Download Button Animation by Aaron Iker (@aaroniker) on CodePen.

Author: Aaron Iker;
Coded in: HTML, CSS (SCSS), JS (gsap);

#50 Liquid button

See the Pen Liquid button by Waaark (@waaark) on CodePen.

Author: Waaark;
Coded in: HTML, CSS, JS (jQuery);

Conclusion

Which button do you like best? If you have also published buttons on codepen, please let me know so I can extend this list! 🙂

Note: All buttons are all published on codepen.io and not by me.

Not enough? Then this could be something for you!

• Creative 404-Error Pages
• Top CSS Navigation Menus
• Satisfying CSS Animations
• Inspiring loading animations
• Beautiful CSS Forms