Basic styling of button elements

Well, 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 boilerplate code that resets the browsers’ default styles for this element.

button {
  margin: 0;
  padding: 0;
  border: none;
  font: inherit;
  color: inherit;
  background: none;
  /* IE7 fix */
  overflow: visible;
}
/* Firefox fix - bug 140562
   We're using :-moz-focusring rather than :focus so that we don't
   change the default focus in other browsers.
*/
button::-moz-focus-inner {
  padding: 0;
  border: none;
}
button:-moz-focusring {
  outline: 1px dotted;
}

Here’s a and

Tell me more about them fixes

Incompressible padding in Firefox

In Firefox, button elements seem to have some incompressible padding (similar to padding: 1px 3px). It’s actually the result of a Firefox-specific pseudo-element inside the button, used to display a focus outline inside the button (around its content).

You can remove it by targetting the button::-moz-focus-inner pseudo-element, but it will remove Firefox’s focus styles so we have to declare our own.

Ignored horizontal padding in IE7

IE7 seems to ignore any horizontal padding on the button element… unless you declare overflow:visible for that element. (Don’t ask me why. Thankfully, this bug was fixed in IE8.) Anyway, visible is the default value for overflow so it should be safe to declare it for all browsers if you need IE7 compatibility.

Credits

Thanks to @mrkirkland for the IE7 fix, @bpierre and @pumpkin for the Firefox fix.

Related testcase

See this page for some tests.