Botón con Rollover

Para este ejemplo debemos tener 3 imágenes, las cuales funcionarán como:

Aqui estan los estilos CSS con la url de las 3 imagenes ya incluidas:

<style type="text/css" >     #bot1 {     border: 0 0 0 0;     padding: 0;     text-align: center;     }         #bot1 a{     background-image:url(http://www.ejemplode.com/images/uploads/bg_menu_1.jpg);     height:30px;     width:100px;     background-position: center top;     display: block;     color: #990000;     text-decoration: none;     padding-top: 5px;     background-repeat: no-repeat;     font-weight: bold;     }     #bot1 a:hover{     background-image:url(http://www.ejemplode.com/images/uploads/bg_menu_2.jpg);     }     #bot1 a:focus{     background-image:url(http://www.ejemplode.com/images/uploads/bg_menu_3.jpg);     }     </style>

Ahora aqui esta el codigo para mostrar el boton:

<span id="bot1">
<a href="URL">TEXTO</a>
</span>

Y asi nos quedara:

REDEANDO