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 web development

Do you need DevOps-experts?

Your development team has a full backlog? No time for infrastructure architecture? Our DevOps team is ready to support you!

  • We build reliable cloud solutions with Infrastructure as code
  • We are experts in security, Linux and databases
  • We support your dev team to perform
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)