Hace poco alguien preguntó algo similar, y una de las soluciones sería esta:
Diseñá una imagen de cómo se vería el botón (llamemosle: fondo_boton.jpg), y otra imagen cuando el mouse se posaría encima (fondo_boton_2.jpg). Entonces hacés lo siguiente:
<html>
<head>
<title>Creando un boton</title>
<style type=text/css>
#miboton a {
background-image: url(fondo_boton.jpg);
}
#miboton a:hover {
background-image: url(fondo_boton_2.jpg);
}
</style>
</head>
<body>
<div>
<a class=miboton href="#"> </a>
</div>
</body>
</html>
Si querés que el fondo no se repita, en el Style usá la propiedad :
background-repeat:no-repeat;