Proper cross-browser CSS styling for buttons

Posted Over 13 years ago. 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
makandra.com
Say thanks5
Last edit
Over 13 years ago
Keywords
css
License
Source code in this card is licensed under the MIT License.

Related cards:

Styling and scaling for mobile devices

If you want your application to display properly on iPad, iPhone or Android there are two things to do:

Define a stylesheet for mobile devices

Using the media attribute on stylesheet HTML tags allows you to have a CSS for mobile browsers...

CSS variables aka CSS Custom Properties

CSS variables are very different from preprocessor variables. While preprocessors use variables to compile a static piece of CSS, CSS custom properties are a reactive (i.e. live) part of the styles. Think of them like usual CSS properties that...

About PIE – CSS3 PIE: CSS3 decorations for IE

CSS Level 3 brings with it some incredibly powerful styling features. Rounded corners, soft drop shadows, gradient fills, and so on. These are the kinds of elements our designer friends love to use because they make for attractive sites, but are d...

Setting SASS variables as value for CSS custom properties

When using custom properties in your stylesheets, you may want to set a specific property value to an existing variable in your SASS environment. A pratical example would be a list of color variables that you've defined in colors.sass and that y...

Remove resource fork files from a FAT volume on MacOS

Be careful!
The following solution will delete files on a volume. If you don't know exactly what you're doing, you can run into big trouble with your computer.

I play mp3 files on my car stereo that are stored on a SD-C...

Browser Standards progress: CSS filter property

Some progress was made by browsers on implementing CSS filters like blur, greyscale or some other effects. You might already know the legacy CSS filter attribute that old IE vers...

HTML forms with multiple submit buttons

Most forms have a single submit button that will save the record when pressed.

Sometimes a form needs additional submit buttons like "accept" or "reject". Such buttons usually attempt a state transition while updating the record.

To process a fo...

CSS: Using the current text color for other color properties

There is a kinda secret, yet well supported CSS feature called currentColor. It's like a special CSS variable that has been supported in almost all browsers for almost all time (see linked Caniuse).

Usage

The currentColor value can be us...

Browser Hacks: CSS Rules to Target Specific Browsers And Versions

The linked site lists a wealth of CSS hacks that let you apply styles to just that one browser. You should be using this mostly for fixing browser issues and not give up on creating solid styles.

Different Stylesheets for Differently Sized Browser Windows | CSS-Tricks

Posted by Arne Hartherz to makandra dev (2010-12-15 14:57)
This website uses short-lived cookies to improve usability.
or learn more