DEV Community

Cover image for I Made 100 CSS Buttons For Your Next Big Project ๐Ÿš€๏ธ
Eluda
Eluda

Posted on • Updated on

I Made 100 CSS Buttons For Your Next Big Project ๐Ÿš€๏ธ

If you like this article, donโ€™t forget to click on that heart button to show your appreciation.

Youโ€™re probably thinking: Thatโ€™s an odd way to start an articleโ€ฆ

But I just wanted to show you that buttons really are everywhere!

GitHub logo ui-buttons / core

100 Modern CSS Buttons. Every style that you can imagine.

๐Ÿค–๏ธ To See Code, Click on One of The Links

Preview Link Description
CSS Button that changes color on click or hover. Basic CSS Button that changes color on click or hover.
CSS Button slides its two inverted triangles to the middle on click or hover. Inverted Triangles CSS Button slides its two inverted triangles to the middle on click or hover.
CSS Button that slides its pseudo-element underline on hover or click. Line Slide CSS Button that slides its pseudo-element underline on hover or click.
CSS Button that crosses over itself and expands on hover or click. Don't Cross The Line CSS Button that crosses over itself and expands on hover or click.
CSS Button that slices its background and cycles its content vertically on click or hover. Slicer And Marquee CSS Button that slices its background and cycles its content vertically on click or hover.
CSS Button that slides two inward-pointing pseudo-element triangles to the center on hover or click. Zoom In And Text Rotate CSS Button that slides two inward-pointing pseudo-element triangles to the center on hover or click.
CSS Button that slides its four alternate blocks and flips its text vertically on click or hover. Alternate Blocks And Text Flip CSS Button that slides its four alternate blocks and flips its text vertically on click or hover.
CSS Button with background that slides right on click or hover. Slide Right CSS Button with background that slides right on click or hover.
CSS Button that slides its increasingly tilted diagonal to the right on click or hover. Tilted diagonal CSS Button that slides its increasingly tilted
โ€ฆ

Youโ€™re bored. So you take your phone out, and you click buttons to โ€”

  1. turn it on (a physical button)
  2. open the twitter app (an icon button)
  3. go to the home page (a navigation button)
  4. like and reply to a tweet (an action button)

and the list goes on and onโ€ฆ.

I think that you get it by now, we are obsessed with pressing buttons! So let me propose an ideaโ€ฆ

Buttons should be more fun! And by โ€œfunโ€, I really mean โ€”

  • practical,
  • precise,
  • and modern.

But as web developers, we already have to worry about so many other things โ€”

  • accessibility (a11y),
  • web vitals,
  • seo.

So imagine if someone could just take one little hurdle away, so that we can focus on the more important stuffโ€ฆ

I decided that I should be that person. I took on the responsibility of building buttons that are โ€”

  • accessible (uses ARIA attributes),
  • modern in style,
  • responsive (works on desktop and mobile).

And not just that, I also decided to make ONE HUNDRED different styles for these buttons. You are guaranteed to find that one style that just works on your website!

Now letโ€™s break-apart one of my favorite button styles: The Overfold.

It first starts by animating a clip-path from one corner to another.

The second part of the effect involves scrolling text vertically, while clipping it using overflow: hidden.


Did you know? Iโ€™m working on 150 CSS Buttons. Follow me to be the first to know when it drops! ๐Ÿค—

Top comments (38)

Collapse
 
renanfranca profile image
Renan Franca

Thank you for sharing โค!

Awesome animation!

You are right to ask for โค! I am doing the same at the bottom of my posts๐Ÿคฉ

Collapse
 
eludadev profile image
Eluda

That's awesome!

Collapse
 
shshank profile image
Shshank

thanks, it's really awesome

Collapse
 
eludadev profile image
Eluda

Thanks!

Collapse
 
freakdaddycode profile image
Richard Hart

Love this and thanks for the cookie

Collapse
 
iamsarma profile image
Sarma Akondi V N M

Great piece of work ๐Ÿ‘

Collapse
 
oesso profile image
Joseph Osorio

Thank you, they're nice buttons for a change.

Collapse
 
atulcodex profile image
๐Ÿšฉ Atul Prajapati ๐Ÿ‡ฎ๐Ÿ‡ณ

Thanks for all this buttons you created and shared with us.

Keep growing ๐Ÿ๐Ÿ๐Ÿ

Collapse
 
aktoriukas profile image
Gedi

Wow! this is amazing stuff! Thanks.

Collapse
 
kalogero_st profile image
Stelios Kalogeropoulos • Edited

Amazing work!!
If I am not cheeky can I request a button? I've been looking for something like for a while but no luck :(

I am sure you will do some wizardry!!

Hmmm image upload doesn't seem to work :/ How can I share a picture with you?

Collapse
 
dovey21 profile image
Somtochukwu Nnaji

Wow, this is amazing thanks for sharing. I've always thought and known that buttons should be fun I find it boring when I click or hover on buttons it executes or just go straight to point. This is beautiful :)

Collapse
 
techcodex profile image
Codex

Awesome work ! It really put some smile on my face seeing all those animations ! Thank you Bro!

โคโคโค

Collapse
 
stevebmurphy profile image
Steve Murphy

You are incredible talented. Good work!!

Collapse
 
jarod41 profile image
JaRoD41

Thank you ! Great job ๐Ÿ‘๐Ÿป ๐Ÿ™๐Ÿป

Collapse
 
timhuang profile image
Timothy Huang

Cool buttons, thanks for sharing.

Collapse
 
booboboston profile image
Bobo Brussels

Thank you. really good read.

Collapse
 
tdvr profile image
tdvr

Brilliant, thx for sharing!