55 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 big and bold on your home page or small and discreet in the footer, buttons are a very important design element for the user flow on your website. For a corporate website, a more discreet design is often used, while creative industries tend to use more eye-catching and “flashy” buttons. So that all industries are equally served, you will find many different button styles 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

Author: Kocsten;
Coded in: HTML, CSS;

#2 Rounded Button

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

#3 Blubby Button

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

#4 Icon buttons

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

#5 Blobs button

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

#6 Thin Buttons

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

#7 Bootstrap Buttons

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

#8 Rounded Pulse Button

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

#9 CSS Fizzy Button

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

#10 Button N° 045

Earn money with your website or blog

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

#11 Flush button

Author: AbhishekBaiju;
Coded in: HTML, CSS;

#12 Button Concept

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

#13 Sliced Button

Author: Sarah;
Coded in: HTML, CSS;

#14 More fancy Icon buttons

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

#15 Button Change

Author: thelaazyguy;
Coded in: HTML, CSS;

#16 Simple Button

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

#17 Button Flip

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

#18 Swipe Right Button

Author: thelaazyguy;
Coded in: HTML, CSS;

#19 Fancy Buttons

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

#20 FlipCover Buttons

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

#21 Collection of Button Hover Effects

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

#22 CSS Button Effect: Animated Border & Glow

Improve user experience and earn money at the same time?

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

#23 CSS Button Hover

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

#24 Still in View

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

#25 Pure CSS Button with Ring Indicator

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

#26 Button Hover Effects

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

#27 Button bubble effect

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

#28 Animation Submit Button

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

#29 Who doesn’t like Fun Buttons?

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

#30 Flipside

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

#31 Squishy Toggle Buttons

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

#32 Button hover effect with box-shadow

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

#33 Submit Button (Anime.js)

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

Earn money with your website or blog

#34 CSS Button Animation

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

#35 CSS Button on Plaid

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

#36 CSS button with bubbles

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

#37 jQuery +3D css button

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

#38 Pure CSS button switch

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

#39 Creative Button Hover Collection

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

#40 CSS Button Animations

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

#41 CSS Button with Hover Effect

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

#42 Button Practice

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

#43 CSS Button Design Animation

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

#44 Six pure CSS Button Hover Animations

Author: Christian;
Coded in: HTML, CSS;

#45 3D CSS BUTTON

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

Earn money with your website or blog

#46 70s CSS Button

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

#47 100 days css Button N° 045

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

#48 Button Hover

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

#49 Download Button Animation

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

#50 Liquid button

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

#51 Awesome Buttons

Author: Astitva2009;
Coded in: HTML, CSS;

#52 Awesome Button Hover Effect

Author: Devang Bajpai;
Coded in: HTML, CSS;

#53 CSS Button Hover Effect INK

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

#54 Button hover with slide animation

Author: Ajeet Kumar;
Coded in: HTML, CSS;

#55 70s CSS Button

Author: halvo;
Coded in: HTML, CSS;

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:

Related Posts
Join the Conversation

15 Comments

  1. This is the biggest collection of animated buttons, I have seen so far! 

    1. there are better ones out there says:

      no.

  2. It’s an awesome CSS buttons animation collections. I have a one more example for this http://css3tools.com/css-snippets/buttons-with-animated-border-on-hover/,

  3. wings io says:

    After I originally commented I appear to have clicked the -Notify
    me when new comments are added- checkbox and from now on whenever a comment is added I receive 4 emails with the same
    comment. Perhaps there is a means you are able to remove me from that
    service? Thank you!

    1. Lorenz says:

      Hi, if you tell me the email address you get the mails, I can check that for you. You can contact me via lh[at]webdeasy.de 🙂

  4. These are some great examples and best part is some of the are pure CSS. Thank you for the collection.

  5. Lorenz says:

    Thank you so much! 🙂

Your email address will not be published.

bold italic underline strikeThrough
insertOrderedList insertUnorderedList outdent indent
removeFormat
createLink unlink
code

This can also interest you