✍️✍️ Styling button elements

Florens Verschelde

This article is a public draft, which means I published it early to get feedback or to counter my perfectionism (probably both).
Draft Alert Level: Medium. Might have missing bits.

Buttons! If you’re building a website or a web app, you probably have buttons everywhere. Or links. Maybe links that look like buttons? Or clickable things. Like buttons. It’s important to get them right!

Pro tip: always use <a> and <button>

For a bunch of reasons it’s important to use the right HTML elements for your clickable stuff. Just two of those reasons:

  1. Real buttons and links, using the correct elements, work with keyboard navigation. Some of your users need it to use your site or web app: they can use keyboard navigation (or other input methods), get a link of all links in the page or in a section, etc. For other users, it just speeds up their workflow, for example in a login form they can click the first text input, and then use the Tab key to go from field to field to button.

  2. If you use a <div> or <span> to “link” to your content, search engines will never find this fake link.

Let’s avoid generic elements like DIV or SPAN for our clickable stuff, our calls-to-action, our buttons and links. Instead, there are two elements that we should go to: A and BUTTON.

If you’re not sure what element to use in a given situation, you can apply this simple rule:

  1. If it goes somewhere, it’s a link: <a href="[url]">…</a>
  2. If it does something else, it’s a button: <button>…</button>

Styling <a> and <button>

Developers may be using <div> or <span> for buttons because they found it hard to style the correct elements.

In particular, the <button> element comes with default browser styles that can make it a bit hard to achieve a precise look. Thankfully, this is easy to fix.

/* Reset link styles (underline only; if you _really_ need to make links invisible you could use color:inherit too) */
a {
  text-decoration: none;

/* Reset button styles; buttons have more default styles, so it takes more work to achieve a “blank slate” look. */
button {
  padding: 0;
  border: none;
  font: inherit;
  color: inherit;
  background-color: transparent;

Once this is done, you should write styles to make your links and buttons distinctive again! For instance you could create a visual component called btn, with a class that can be applied on both links and regular buttons:

.btn {
  /* default for <button>, but useful for <a> */
  display: inline-block;
  /* create a small space when buttons wrap on 2 lines */
  margin: 2px 0;
  padding: 0.5em 1em;
  border-radius: 4px;
  /* if the button text wraps on 2 lines, center the text */
  text-align: center;
  color: #FFFFFF;
  background-color: #7744AA;
  /* let’s use the hand cursor for <button> too */
  cursor: pointer;

Applying this on either <a class="btn"> or <button class="btn"> should give you the same visual result:

Hi, I’m a link

This style of button — flat, white text on color background — is very common, but make sure your text and background colors have enough contrast to be read comfortably by most users.

For comparison, here’s an example with insufficient contrast:

Changing the focus styles

Still writing this part :)