I Made 100 CSS Buttons For Your Next Big Project

If you like this article, dont forget to click on that heart button to show your appreciation.

Youre probably thinking: Thats an odd way to start an article

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

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

You can find each and every single button in the official CSS Buttons website. Just copy-and-paste the code, and never worry about licensing. (no attributions required)

Lets 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? Im working on 200 CSS Buttons. Follow me to be the first to know when it drops!

EludaFollow

follow me for a free cookie