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 |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
|
|
|
|
|
|
Mac OS X Leopard Screenshots | ||||||
---|---|---|---|---|---|---|
Firefox 3 Beta 4 | Opera 9.5 Alpha | Safari 3 | ||||
![]() |
![]() |
![]() |
||||
|
|
|
Linux Ubuntu 7 Screenshots | ||||||
---|---|---|---|---|---|---|
Firefox 2 | Opera 9.26 | |||||
![]() |
![]() |
|||||
|
|
Created by Chris Hester 25 October 2006 · Last updated 14 March 2008
Enjoy the on time success with help of testking 70-432 questions, testking 642-504 study notes and testking 640-721 exam dumps.