There are many ways to set-up a button but here's one way to do it if you have your button(s) set-up from list item(s). Bear in mind that there are no fancy javascript effects here - the image switch and preloading is just done with CSS.
Your HTML:
<ul class="mybutton">
<li class="mybutton"><a href="http://www.mywebsite.com/">My Button Text</a></li>
</ul>
<!-- Preload button images - wont be visible on-screen -->
<div id="mybutton-hover"></div>
<div id="mybutton-active"></div>
Your CSS:
ul.mybutton {
list-style: none;
margin: 0;
padding: 0;
height: 100%;
}
li.mybutton {
float: left;
width: 152px; /* tweek to suit - depends on width of button image */
margin: 0;
padding: 0;
text-align: center;
}
li.mybutton a {
display: block;
text-decoration: none;
padding: 15px 0; /* tweek to suit - depends on height of button image */
background:url("http://www.mywebsite.com/images/mybutton.gif") no-repeat 0 0;
}
li.mybutton a:hover {
background: url("http://www.mywebsite.com/images/mybutton-hover.gif") no-repeat 0 0;
}
li.mybutton a:active {
background: url("http://www.mywebsite.com/images/mybutton-active.gif") no-repeat 0 0;
}
div#mybutton-hover { /* preload the hover button without showing it on-screen */
position: absolute;
top: 0px;
left: 0px;
width: 0px;
height: 0px;
background: url("http://www.mywebsite.com/images/mybutton-hover.gif") 0 0 no-repeat;
}
div#mybutton-active { /* preload the active-click button without showing it on-screen */
position: absolute;
top: 0px;
left: 0px;
width: 0px;
height: 0px;
background: url("http://www.mywebsite.com/images/mybutton-active.gif") 0 0 no-repeat;
}