RollOver en botones usando CSS

Aqui un breve tip de como hacer un rollover para utilizar en botones o algun otro objeto usando css y evitando la precargar de la segunda imagen.

Hay muchos menus basados en javascript que te hacen un rollover en tus botones pero utilizando dos imagenes la que va por default y una segunda que apareceria cuando pases el mouse sobre el mouse el problema aqui que si no hay una precarga de la segunda imagen la imagen no apareceria enseguida si no hasta que se cargue y pues eso no es muy estetico que digamos.

Pero bueno para eso esta el css y aqui esta la solucion, primero creamos una imagen de 40px de altura.

Ahora creamos nuestro menu:

[code lang=”html”]

• Opcion #1
• Opcion #2
• Opcion #3

[/code]

Ahora nos vamos a nuestro archivo css:

[code lang=”css”]

ul{
list-style:none;
}

ul li{
display:inline;
}

ul li a{
display:inline;
padding:2px 4px;
margin:0 1px;
color:#ffffff;
text-decoration:none;
background:url(bg_boton.jpg) repeat-x 0 0;
}

ul li a:hover{
color:#ffffff;
background:url(bg_boton.jpg) repeat-x 0 -22px;
}[/code]

Ver Ejemplo

Espero les sea util, es rapido y sencillo y no es necesario hacer una precarga de imagenes.