buttons without style



~2 min read


208 words

When it comes to accessibility (a11y) on the web, one of the best / easiest things you can do is to use semantic HTML.

Structural, semantic HTML is the key starting point toward good accessibility practices.1

That means, when you want to have something be clickable, use a <button>. If it’s the top header, use <h1>. The next header should be <h2>, not <h3>, etc.

Buttons, however, often pose a problem. They’re the best way to indicate interactivity, but they come with a lot of built-in styling that may not be aligned with the style of your website.

One easy solution is to simply make a <div role="button"> with an onClick event handler.

A better solution is create a base button that is “styleless”.

While not a perfect solution (see CSS Tricks for some caveats2), the following is a good start:

.stylelessButton {
  font-size: 100%;
  font-family: inherit;
  border: 0;
  padding: 0;
  background: transparent; // Firefox

This will strip out the majority of the CSS that makes a button look different than what it’s around and can serve as a nice base on which to build.


1 Web Accessibility Guidelines - Semantic HTML | Carnegie Museums 2 Overriding Default Button Styles | CSS-Tricks

Related Posts
  • Details Tags And Choosing Your Own Adventure On The Web

  • Hi there and thanks for reading! My name's Stephen. I live in Chicago with my wife, Kate, and dog, Finn. Want more? See about and get in touch!