Styling a CSS button

To display a HTML button without any kind of styling is risky to say the least. Browsers render buttons differently and they certainly do not care if their button fits within your intended site's look and feel.

When styling buttons it is important to remember that you must change all the elements of the button, or risk seeing an odd half-browser button half-styled Frankenstein. In particular, do not forget to change the border to remove the beveled edges. Some browsers also change the standard cursor - it is good practice to manually set this.

Example:

.orangebutton { 
  background: #faae5c url(btn.png) repeat-x; 
  padding: 5px 10px; 
  border: 1px solid #faae5c; 
  fcolor: #FFF; 
  font-size: 14px; 
  cursor: pointer; 
}

.orangebutton:hover { 
  background: #b0c8e7 url(../images/btn-blue.png) repeat-x; 
  border-color: #b0c8e7; 
}

Note: The hover attribute is not support in IE6. If a customer begs us to support IE6, we will often fix this by applying a javascript overclass when the button has been hovered over.