Styled submit buttons

This page is related to the articles Styling form controls and Styling even more form controls. For more info on what the image on this page shows, please read the articles.

The following CSS rules were used to style these submit buttons:

  1. #el01 {color:#00f;}
  2. #el02 {background-color:#ddd;}
  3. #el03 {color:#fff; background-color:#33b;}
  4. #el04 {border-width:4px;}
  5. #el05 {border-color:#00f;}
  6. #el06 {border:0;}
  7. #el07 {font-family:"Courier New", Courier;}
  8. #el08 {font-size:150%;}
  9. #el09 {font-size:10%;}
  10. #el10 {font-weight:bold;}
  11. #el11 {padding:0;}
  12. #el12 {margin:0; text-align:right; width:10em;}

In your current browser, with your current settings, the submit buttons look like this:

And here are screenshots from several browsers on different operating systems:

As you can see, the results vary a lot between browsers and operating systems.

Lab Index | 456 Berea Street Home | Copyright © 2003-2014 Roger Johansson