DEV Community

Cover image for 75 beautiful CSS Buttons

Posted on • Updated on • Originally published at

Button Animation CSS 75 beautiful CSS Buttons

CSS Buttons are an important part of web design, as they not only improve the user experience, but also affect the look and aesthetics of the website. In this article you will find a collection of the best CSS Buttons.

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

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 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);

➑️ See the rest of the buttons on my blog ❀️

Top comments (42)

siddm22 profile image
Siddhant Misra

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

webdeasy profile image

Absolutely 😊

web_dev profile image

These are πŸ”₯πŸ”₯

fatimazohra profile image
fatima zohra marso

So Niceeeee

rohanfaiyazkhan profile image
Rohan Faiyaz Khan

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

webdeasy profile image

I'm glad I could help you! 😊

adsick profile image

there are 34 buttons (and yeah, button number 34 is missing)

webdeasy profile image

Oh, you're right, I added the missing button :)
The initial post had 35 buttons, now there are 65 buttons, you can see all on my blog:

lelinh014756 profile image
Hong Linh

thank you

haodev007 profile image

I love them

benjaminv profile image

The first one made my day already. So nice.

divyanshraj0408 profile image
Divyansh Raj

This is more than amazing and underrated. Thankyou so much!!

renanlucenadeveloper profile image
Renan Lucena dos Santos

Thanks man!!!!

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!

mirime3ds profile image

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.

shivani805 profile image
Shivani Panda

wow so good

saijogeorge profile image
π•Šπ•’π•šπ•›π•  π”Ύπ•–π• π•£π•˜π•–

nice work, here are some more

webdeasy profile image


pravindia profile image
Pravin kumar

A good collection of button inspirations

mutale85 profile image

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

neelam28 profile image

Thanks so much for this wonderful and helpful post!

Some comments may only be visible to logged-in visitors. Sign in to view all comments.