Proper cross-browser CSS styling for buttons

Updated . Posted . Visible to the public.

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
Last edit
Keywords
css
License
Source code in this card is licensed under the MIT License.
Posted by Arne Hartherz to makandra dev (2010-12-15 14:57)