Basic styling of button elements

You will want to use the button element for e.g. buttons triggering JavaScript actions, and not <a href="#">…</a> which has a different semantic meaning, or span or div which have no meaning and don’t come with keyboard navigation and accessibility features built in.

But button elements have historically been tricky to style, and though the situation is quite better now there are still a few quirks that need fixing. Here’s some code that resets the browsers’ default styles for this element.

button {
  margin: 0;
  padding: 0;
  border: none;
  font: inherit;
  color: inherit;
  background: none;
}

This is the result we get:

If you want to allow for buttons with the default browser style, you might want to use a class for resetting buttons rather than applying the styles to the button selector.