Styling HTML Submit Buttons

Lately I have been coding few website including many HTML forms and I found out that various browsers will render HTML submit button quite differently. I will show you how to properly style submit buttons in order to achieve a very similar look in all major browsers. First, bellow is a basic HTML submit button markup.

<input type="submit" name="submit" value="Submit" class="submit" />

First thing I did was to set a small padding on sides of the button to make it look better, leaving a default browser button look. I have also changed the default cursor when pointing on a submit button. Bellow is the corresponding part of the stylesheet.

.submit {
  cursor:pointer;
  padding:1px 5px;
  }

Here is how our HTML submit button looks in different browsers so far (all used browsers were clean installations without any widgets, plugins or add-ons):


As you can see, Firefox 3.0 and Opera 9.5 render the button pretty good, Internet Explorer 7 does not. IE7 adds too much padding to the left and right side, making the submit button look ugly. It’s a well-known IE width bug (present in both IE6 and IE7), easy to fix though. Let’s edit the stylesheet.

.submit {
  cursor:pointer;
  overflow:visible; /* ie6/7 width fix */
  width:auto; /* ie6/7 width fix */
  padding:1px 5px;
  }


Looks much better now. Next thing I wanted to do was to achieve exactly the same look in all three browsers. Let’s add some border and background color.

.submit {
  cursor:pointer;
  overflow:visible; /* ie6/7 width fix */
  width:auto; /* ie6/7 width fix */
  padding:1px 5px;
  background:#ddd;
  border:1px solid #aaa;
  }


As you can see, our HTML submit button is already looking fairly similar in all three browsers. Finally, let’s define a color and font for the submit button value.

.submit {
  cursor:pointer;
  overflow:visible; /* ie6/7 width fix */
  width:auto; /* ie6/7 width fix */
  padding:1px 5px;
  background:#ddd;
  color:#333;
  font:10pt arial, sans-serif;
  border:1px solid #aaa;
  }


That’s it. Probably the closest look possible to achieve. They are still not the same though. Especially the one in IE, which has too much top and bottom padding. I haven’t yet figured how to fix that. Once I figure it out, I will update this post. If it really bothers you, you can still use Internet Explorer conditional comments and reset the padding just for Internet Explorer.