Read more

Proper cross-browser CSS styling for buttons

Arne Hartherz
December 15, 2010Software engineer at makandra GmbH

Styling button tags across all major browsers is not easy.

Illustration UI/UX Design

UI/UX Design by makandra brand

We make sure that your target audience has the best possible experience with your digital product. You get:

  • Design tailored to your audience
  • Proven processes customized to your needs
  • An expert team of experienced designers
Read more Show archive.org snapshot

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.

Posted by Arne Hartherz to makandra dev (2010-12-15 15:57)