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.

botones css con rollover

Ahora creamos nuestro menu:

<ul>
<li><a href=“#”>Opcion #1</a></li>
<li><a href=“#”>Opcion #2</a></li>
<li><a href=“#”>Opcion #3</a></li>
</ul>

Ahora nos vamos a nuestro archivo 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;
}

Ver Ejemplo

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

Publica tu Comentario sobre este Articulo.

Mas Articulos, Relacionados:

1 Comentario en “RollOver en botones usando CSS”

programame.net | Septiembre 19, 2007@ 9:42 pm

Botones con RollOver usando CSS…

Tutorial para realizar un menu con efecto rollover con CSS sin Javascript y usando imagenes a y sin utilizar tablas, este metodo tambien evitar tener que hacer precargas de imagenes….