Useful scripting techniques

Click here to go back

18/09/10 - 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 look and feel.

When styling buttons it is important to remember that you must change all 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 over class when the button has been hovered over.