← Red: submit button, semitransparent green: expected button dimensions and position.

Ugly submit button

CSS code is simple.
Button looks different in all browsers.

			
.submit { 
  padding: 5px 10px; 
  font: 12px/18px sans-serif;
  background: red; 
  color: white; 
  border: 1px outset #F30;
}
			
		

← Red: submit button, semitransparent green: expected button dimensions and position.

Better submit button

CSS code is slightly more complex.
Button looks identical in almost all browsers.*

			
.submit_better { 
  padding: 5px 10px; 
  font: 12px/18px sans-serif;
  background: red; 
  color: white; 
  border: 1px outset #F30;
  /* remove extra padding in IE6+7: */
  overflow: visible;
  /* unify height in Firefox, Opera 
  (watch traditional box model): */
  height: 30px;
  /* remove extra margin in Webkit: */
  margin: 0;
}
 
/* remove extra padding in Firefox: */
.submit_better::-moz-focus-inner {
  padding: 0;
}

			
		

Article (in Czech)
Other CSS tests