ну вот так можно:
<style>
.b {
border: none;
width: 100%; // размер
height: 100%; // размер
background: url(это обычно состояние);
}
.button-hover {
background: url(при наведение);
}
.button-click {
background: url(по щелчку);
}
</style>
<button style="свои настройки">
<div id="a" class="b" onclick="какаято функция"></div></button>
<script>
var button = document.getElementById('a')
button.onmouseover = function() {
addClass(this, 'button-hover')
}
button.onmouseout = function() {
removeClass(this, 'button-hover')
removeClass(this, 'button-click')
}
button.onmousedown = function() {
addClass(this, 'button-click')
}
button.onmouseup = function() {
removeClass(this, 'button-click')
}
// -------------- helpers --------------
function addClass(el, cls) {
for(var c = el.className.split(' '),i=c.length-1; i>=0; i--) {
if (c[i] == cls) return
}
el.className += ' '+cls
}
function removeClass(el, cls) {
for(var c = el.className.split(' '),i=c.length-1; i>=0; i--) {
if (c[i] == cls) c.splice(i,1)
}
el.className = c.join(' ')
}
</script>
Вот как то так.