DEV Community

loading...
Cover image for Top 25 CSS Buttons (+ animations)

Button Animation CSS Top 25 CSS Buttons (+ animations)

webdeasy profile image WebDEasy Originally published at webdeasy.de ・Updated on ・4 min read

Originally published on webdeasy.de.

Updated version is available (click)! πŸ”₯

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


Author: Kocsten
Coded in: HTML, CSS;

#2 Rounded Button


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

#3 3D Touch


Author: jemware
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


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


Author: Anthony
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 Gooey Menu


Author: Luca Bebber;
Coded in: HTML, CSS (SCSS);

#28 SVG CSS3 Menu/Burger Button


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

#29 Button bubble effect


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

#30 Animation Submit Button


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

#31 Who doesn’t like Fun Buttons?


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

#32 Flipside


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

#33 Squishy Toggle Buttons


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

#35 Submit Button (Anime.js)


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

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!

Discussion (27)

pic
Editor guide
Collapse
siddm22 profile image
Siddhant Misra

A button is usually underrated. This shows they deserve way more respect than we give them.

Collapse
webdeasy profile image
WebDEasy Author

Absolutely 😊

Collapse
web_dev profile image
Web_Codr

These are πŸ”₯πŸ”₯

Collapse
rohanfaiyazkhan profile image
Rohan Faiyaz Khan

This is really useful! I was looking for ways to more css based components. Thanks!

Collapse
webdeasy profile image
WebDEasy Author

I'm glad I could help you! 😊

Collapse
zakius profile image
zakius • Edited

4 is the best, 16 and 14 aren't too bad either and I probably wouldn't mind seeing them in the wild, everything else is just way too distracting
besides that any button that can't be achieved by using only a styled button element is broken
simplicity is the key, both in looks and the code!

Collapse
mirime3ds profile image
UGxd

I agree, they made simple buttons meaninglessly difficult. It doesn't matter to write too much code, it is important to write enough code, and the more you can reduce it the better. I think like this.

Collapse
leraatwater profile image
Lera Atwater

These are neat, thank you for gathering them up!

Collapse
saijogeorge profile image
Collapse
webdeasy profile image
Collapse
neerajarr profile image
neerajarr

I liked #8 the best

Collapse
erclairebaer profile image
Claire McCrea

Fantastic! Crazy what CSS can do 🀯

Collapse
ajdesai profile image
Ajit Desai

This is one of the Best article I ever came across about buttons.
Exactly I was looking for, loved it Sir😍

Collapse
olethrosjv profile image
Joe Vaughn

Thank you. This is a very good reference to have.

Collapse
sreehariavikkal profile image
sreehari

Amazing buttons <3 .Can you please help me. How to move this buttons to left,right or bottom. I tried padding, but its not working. (sorry, im new to css)

Collapse
webdeasy profile image
WebDEasy Author

There are different ways to do that:

You can use float (left or right). Or you can have a look at CSS Flexbox (better way) :)

Collapse
dgiulian profile image
Diego Giuliani

Wow, those are awesome. #1 was amazing.

Collapse
tomhermans profile image
tom hermans

Great list. Some good ideas too regarding ux and conveying information through behaviour

Collapse
nanythery profile image
Nadine M. ThΓͺry

I love them all, thank you!

Collapse
webdeasy profile image
WebDEasy Author

You're welcome! πŸ˜‡

Collapse
lakdhiubhayarat profile image
lak@smartDeLK

Thank you and love it

Collapse
lisacee profile image
Lisa Cee

My favorites are #14, the fancy icon buttons. They would be a great way to show off your css skills on a portfolio site.

Collapse
nokha_debbarma profile image
Nokha Debbarma

I thought I'm creative enough until I saw these awesome buttons. Thanks for this sharing this wonderful post.

Collapse
mutale85 profile image
Mutale85

This is so cool. was looking for something to spice up my front page. Here they are.

Collapse
savage profile image
Jason A Savage

My favorite was #17...until I got to #20!!! Amazing!

Collapse
enbonnet profile image
Ender Bonnet

Amazing work!

Collapse
xinnks profile image
James Sinkala

Sometimes you don't know that you need them until you see them. A breath of fresh air buttons.