The default <button> and <input type="submit"> tags work great but look super drab. Sometimes, you want jazz things up by adding images and stylized text. This can be easily done by converting a simple <span> into a button replacement.
First, we will define a class called "button".
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.button {
border-style: outset;
border-width: 3px;
padding: 10px 10px 10px 10px;
border-color: #ECECEC;
background: #DADADA;
cursor: default;
}
.button:active {
border-style: inset;
}
</style>
Note the DOCTYPE declaration. We use the HTML5 syntax which makes a difference in IE. Things may be different if you use an old style DOCTYPE.
The key is to use the :active pseudo CSS selector. This selector matches when an element is clicked on. In normal state, we set the border-style to be outset. When clicked, the style becomes inset. That is the magic.
Then, all we have to do is use the styles from <span> elements.
<p> Custom HTML buttons: <span class="button"><img align="center" src="http://cdn1.iconfinder.com/data/icons/freeapplication/png/24x24/New.png" /> Add Item</span> <span class="button"><img align="center" src="http://cdn1.iconfinder.com/data/icons/icojoy/shadow/standart/png/24x24/001_39.png" /> Refresh view</span> </p>
