About The Author

Vadim is the founder of Web Standards , the first Russian front-end community. Host and producer of the Web Standards weekly podcast . Web Standards Days … More about Vadim ↬

Email Newsletter

Weekly tips on front-end & UX .
Trusted by 200,000+ folks.

Not everything that’s round and stands out is considered to be a button. In this article, Vadim explains how you can create a proper interactive button for your users — one that shouldn’t be confused for anything else.

Let’s say you have a part of an interface that the user clicks and something happens. Sounds like a button to me, but let’s call it a “clicky thing” for now. I know, you’re confident that it’s a button too: It’s rounded and stands out with a nice tomato color, asking to be interacted with. But let’s think about it for a moment. It’ll save time in the long run , I promise.

Tomato button-like thing with ‘Something’ text on it.
Design for your ‘clicky thing’ ( Large preview )

What if the text in this clicky thing was “Read more”, and clicking it led the user to an article on another page? Hmm. And what if there was a blue underlined word, “Close”, that closes the popup dialog? Is it a link just because it’s blue and underlined? Of course not.

Button-like link and link-like button
The link or button dilemma ( Large preview )
More after jump! Continue reading below ↓

Whoa! It seems like there’s no way to tell if it’s a link or a button just by looking at it. That’s crazy! We need to understand what this thing does before choosing the right element. But what if we don’t know what it does just yet or are simply confused? Well, there’s a handy flow chart for us:

Flow chart: It’s a button. If not, then it’s a link. That’s it.
A scientific flow chart for choosing the right element ( Large preview )
  1. It’s a button.
  2. If not, then it’s a link.
  3. That’s it.

So, is everything a button? No, but you can always start with a button for almost any element that can be clicked or interacted with in a similar way. And if it’s lacking something, like navigation to another page, use a link instead. And no, a pointer is not a reason to make it . We have cursor: pointer for that.

Focused tomato button with ‘Something’ text on it
Don’t forget to provide focus styles. ( Large preview )

All right, it’s a

That didn’t take long. You wanted to build it quickly and grab some lunch because you’re hungry. Ok, let’s see how it looks and get going.

Ugly-looking tomato button, rendered in a browser
Sometimes the browser is not your best friend. ( Large preview )

Oh my god! Something is wrong with the browser. Why is this button so ugly? The text is tiny, even though we have explicitly set the body to 16px , and even the font-family is wrong. The rounded border with a silly pseudo-shadow is so retro that it’s not even a trend yet.

Ahh, it’s the browser’s default styling. You need to carefully undo it or even add Normalize.css or Reset.css… or you could just use a

and forget about it. Isn’t solving problems quickly what they pay you for? You’re hungry and this isn’t helping at all. But you’re a professional: Pull yourself together and think.

What’s the difference between a

Now you know! This attribute does not just disable all events on form elements, but also removes them from the tab order. Problem solved!


But wait, there’s more! It also triggers the :disabled pseudo-class in CSS, meaning that we can get rid of the BEM modifier to declare styles and use the built-in dynamic modifier instead.

	.button:disabled { background-color: #9B9B9B; }

As for the browser’s ugly styles, we don’t have to use all of Normalize.css to fix a single button. Use it as a source of wisdom: The three extra lines below will fix most of the annoying differences from the

. If you ever need more, you can copy the relevant parts from it.

	.button { font-size: 100%; font-family: inherit; border: none; }

Done. HTML is not so bad after all!

But if it surprises you now and then, make sure to check the HTML specification for answers. It’s gotten much friendlier over the years, and it’s full of good usage and accessibility examples. And, of course, good ol’ HTML5 Doctor is still a reliable place to figure out the difference between the

elements and to check whether the document outline is a thing yet (not really). There’s a good chance you’ll also end up reading the HTML documentation by Mozilla , and you won’t regret it either.

This task is now done! What’s next? A dropdown carousel calendar with a search field? Oh my! Good luck with that. But remember: the