DEV Community

Cover image for 75 cool CSS Buttons

75 cool CSS Buttons

webdeasy.de on June 08, 2019

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 ...
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.de

Absolutely 😊

Collapse
 
web_dev profile image
Web_Codr

These are 🔥🔥

Collapse
 
fatimazohra profile image
fatima zohra marso

So Niceeeee

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.de

I'm glad I could help you! 😊

Collapse
 
adsick profile image
adsick

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

Collapse
 
webdeasy profile image
webdeasy.de

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: webdeasy.de/en/top-css-buttons-en/

Collapse
 
haodev007 profile image
Holmes

I love them

Collapse
 
lelinh014756 profile image
Hong Linh

thank you

Collapse
 
divyanshraj0408 profile image
Divyansh Raj

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

Collapse
 
benjaminv profile image
benjaminv

The first one made my day already. So nice.

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
 
shivani805 profile image
Shivani Panda

wow so good

Collapse
 
renanlucenadeveloper profile image
Renan Lucena dos Santos

Thanks man!!!!

Collapse
 
mutale85 profile image
Mutale85

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

Collapse
 
saijogeorge profile image
𝕊𝕒𝕚𝕛𝕠 𝔾𝕖𝕠𝕣𝕘𝕖

nice work, here are some more codemyui.com/tag/button/

Collapse
 
webdeasy profile image
webdeasy.de

Awesome!

Collapse
 
leraatwater profile image
Lera Atwater

These are neat, thank you for gathering them up!

Collapse
 
lakdhiubhayarat profile image
lak@smartDeLK

Thank you and love it

Collapse
 
dienlanhvincool profile image
Điện lạnh Vincool

Thank so much. It's great that I apply for my web dienlanhvincool.vn

Collapse
 
pravindia profile image
Pravin kumar

A good collection of button inspirations

Collapse
 
neelam28 profile image
Neelam

Thanks so much for this wonderful and helpful post!

Collapse
 
sahinur profile image
Sahinur Islam

wow nice

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
 
nanythery profile image
Nadine M. Thêry

I love them all, thank you!

Collapse
 
webdeasy profile image
webdeasy.de

You're welcome! 😇

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
 
enbonnet profile image
Ender Bonnet

Amazing work!

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.de

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
 
neerajarr profile image
neerajarr

I liked #8 the best

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
 
xinnks profile image
James Sinkala

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

Collapse
 
karm profile image
Carmen

Hello all,

maybe the "noobest" question here.
Is there a way to integrate these in Elementor? If so, how can I do it?
Please don't be too harsh, I am a beginner.

XoXo, Carmen