Proper cross-browser CSS styling for buttons

Styling button tags across all major browsers is not easy.

Many times you should be fine by using the native button style a browser-OS-combination offers you. But if you are trying to style buttons with images (e.g. by nesting a span tag inside them as assigning a background to both button and span) it will look different on each browser.

Use this Sass Show archive.org snapshot snippet as a base style:

button
  border: 0
  padding: 0
  cursor: pointer
  overflow: visible // removes padding in IE
  &::-moz-focus-inner
    // removes padding in Firefox
    border: none
    padding: 0

Although some websites claim that either "padding: 0" or "border-width: 0" work for Firefox, you actually need both to cover all cases.

Arne Hartherz