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);
#34 CSS Button Animation
Author: Sasha;
Coded in: HTML (Pug), CSS (SCSS), JS;
#35 Submit Button (Anime.js)
Author: Andrew Millen;
Coded in: HTML, CSS (SCSS), JS (jQuery & anime.js);
...
Oldest comments (42)
This is really useful! I was looking for ways to more css based components. Thanks!
I'm glad I could help you! 😊
A button is usually underrated. This shows they deserve way more respect than we give them.
Absolutely 😊
These are 🔥🔥
I love them all, thank you!
You're welcome! 😇
Thank you and love it
My favorites are #14, the fancy icon buttons. They would be a great way to show off your css skills on a portfolio site.
Wow, those are awesome. #1 was amazing.
Amazing work!
Fantastic! Crazy what CSS can do 🤯
These are neat, thank you for gathering them up!
Thank you. This is a very good reference to have.
Great list. Some good ideas too regarding ux and conveying information through behaviour
This is one of the Best article I ever came across about buttons.
Exactly I was looking for, loved it Sir😍
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!
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.
This is so cool. was looking for something to spice up my front page. Here they are.
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)
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) :)
Some comments may only be visible to logged-in visitors. Sign in to view all comments.