Buttons Padding Demo

Here is a LIVE demo showing how input buttons are rendered in your browser. The 'Standard' column will look different depending on your operating system. The '+ Border' column shows the same buttons with a red border added. (This removes the default button style as seen in the first column.)

There are also rows showing how the buttons look with padding added. The top row has no padding style applied and so is the default look. The second row has zero padding applied, followed by rows incrementing the padding by 1 pixel per row.

Both columns also show the difference between a button with and without text displayed inside it. Note: it appears that a standard height and width of 'auto' is used by each browser. If you set these values manually, the size of the buttons can be changed dramatically. Setting zero width and height may even make them disappear!

There then follows a series of tables of screenshots of the buttons taken from popular browsers and operating systems. This helps to highlight any differences in rendering. There are also notes below the screenshots to point out any key differences and helpful information.

LIVE DEMO

Standard

+ Border

Padding

Blank

Text

Blank

Text

-

0

1px

2px

3px

4px

5px

Windowsxp Screenshots

IE6

IE7

IE8 Beta 1

Firefox 2

Opera 9

Safari 3

Buttons below 2px have extra padding applied

The standard button size matches the one seen when zero padding is applied, not wider (even though both show some fixed padding used)

Buttons below 2px have extra padding applied

The standard button size matches the one seen when zero padding is applied, not wider (even though both show some fixed padding used)

IE8 marks a radical departure from previous versions. Padding can be almost completely removed from all sides of the standard buttons, which are now much squarer.

Styled buttons with padding added have no default width or height

IE8 adds borders to all standard buttons if you zoom large enough

3px padding left and right, and 1px padding top and bottom appears to be added even when zero padding is applied. (Thus the user can never remove the padding completely. Buttons may also appear larger than expected.)

Zero padding is possible on the styled buttons, though a default height remains

Opera 9 adds borders to all standard buttons if you zoom large enough

Safari, now available for Windows, differs completely in its rendering style used for standard buttons, matching that of OS X

Padding on the standard buttons has no effect. Also the blank ones are too narrow for the edges of the shape to appear joined.

Zero padding is possible on the styled buttons, though a default height remains

Mac OS X Leopard Screenshots

Firefox 3 Beta 4

Opera 9.5 Alpha

Safari 3

Padding on the standard buttons has no effect

Styled buttons appear to have quite a bit of default padding

The standard buttons are an inconsistent mix of square and rounded types of differing styles. Note the ones cut off at the sides.

Zero padding is possible on the styled buttons, though a default height remains

Padding on the standard buttons has no effect.

Zero padding is possible on the styled buttons, though a default height remains

Linux Ubuntu 7 Screenshots

Firefox 2

Opera 9.26

Buttons are blocky and appear to have quite a bit of default padding in them.

Opera's own skinned theme used for standard buttons is square with a wide default padding (more than 5px)

Zero padding is possible on the styled buttons, though a default height remains