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.