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 eludadev / ui-buttons

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 slides its background to the right on click or hover and more to the right again on click or hover. In And Out CSS Button that slides its background to the right on click or hover and more to the right again on click or hover.
CSS Button that paper-folds one side to reveal a progress-bar on hover or click. Progress Fold CSS Button that paper-folds one side to reveal a progress-bar on hover or click.
CSS Button that moves two circles closer to each other that have a gooey and slimy effect on hover or click. Gooey CSS Button that moves two circles closer to each other that have a gooey and slimy effect on hover or click.
CSS Button that plays the rubberband animation from animate.css on hover or click. Rubberband CSS Button that plays the rubberband animation from animate.css on hover or click.
CSS Button that floats up with a box shadow below it on click or hover. Float Up CSS Button that floats up with a box shadow below it on click or hover.
CSS Button with two backgrounds that slide vertically to the center on click or hover. Double Vertical CSS Button with two backgrounds that slide vertically to the center on click or hover.
CSS Button that translates its text vertically on hover or click. Vertical Marquee CSS Button that translates its text vertically on hover or click.
CSS Button with striped background that scrolls on click or hover. Striped Zebra CSS Button with striped background that scrolls on click or

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! 🤗

Discussion (36)

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 Author

That's awesome!

Collapse
freakdaddycode profile image
Richard Hart

Love this and thanks for the cookie

Collapse
atulcodex profile image
Atul Prajapati

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

Keep growing 🏁🏁🏁

Collapse
oesso profile image
Joseph Osorio

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

Collapse
iamsarma profile image
Sarma Akondi V N M

Great piece of work 👍

Collapse
aktoriukas profile image
Gedi

Wow! this is amazing stuff! Thanks.

Collapse
kalogero_st profile image
Stelios Kalogeropoulos • Edited on

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!

Collapse
ambriel profile image
Ambriel Goshi

Really helpful.

Collapse
andrewbaisden profile image
Andrew Baisden

Super useful resource!

Collapse
jarvisscript profile image
Chris Jarvis

These are creative, Love the shapeshifter arrow and the bubble effect buttons.

Collapse
adophilus profile image
Adophilus

You are too much

Collapse
matija2209 profile image
matija2209

You are a CSS wizard

Collapse
vareksun profile image
Varek

Very good stuff

Collapse
brunoj profile image
Bruno

Wonderful post

Collapse
snelson1 profile image
Sophia Nelson

Glad I came across this.

Collapse
eliascode_ profile image
Luis Elias

Gracias por compartir tu arte. ❤

Collapse
tuasegun profile image
Tuasegun

This is awesome

Collapse
dhruv194 profile image
Dhruv Mehta

Damn! you can now create your own library for having CSS buttons, which we can use in our projects. No need to know the entire CSS code, just the button name and use it as we want.
Think about it!

Collapse
spandyboss profile image
SpandyBoss

Hi nice work, keep it up.
I have a question,
How did you got the above card ? I also need it.
Thanks

Collapse
dinerdas profile image
Diner Das

Thanks

Collapse
merthod profile image
Merthod

I want my cookie.

Collapse
samrached profile image
sam-rached

Merci, c'est super cool

Collapse
peteole profile image
Ole Petersen

They look very nice! Would be great if you could add bindings for major JavaScript frameworks such as React, Swelte or SolidJS. I believe this would give them a much broader userbase.