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:

[code lang=”html”]

[/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.

comment ¿Que opinas?

Artículos recientes

close

Eat me, una colección tipográfica con letras de caramelo

  Massimo Gammacurta es el responsable de la creación de esta colección tipográfica inspirada en caramelos; estas ilustraciones creativas que reciben el nombre de “Eat me” representan de alguna manera mediante colores y texturas brillantes…

close

play_circle_outline Animación que explica la teoría del color para diseñadores

El día de hoy quiero compartir con ustedes una animación que explica de manera eficiente y convincente los aspecto más importantes de la teoría del color. Esta animación nos lleva desde los aspectos más fundamentales…

close

play_circle_outline Vídeo: Evolución de las cámaras Canon EOS en 30 años

Este es un simple vídeo que muestra la evolución de las cámaras Canon EOS desde hace 30 años, algo que seguro traerá un poco de nostalgia a todos los Canonistas que visitan este blog al…

close

La Biblia del Churrasco, un ejemplo de diseño interactivo que debes conocer

El día de hoy quiero compartir con ustedes un peculiar ejemplo de diseño interactivo desarrollado por el director creativo Lucas Reis; este diseño forma parte de trabajo para la marca de utensilios de cocina Tramontina,…

close

play_circle_outline Este es el primer trailer internacional de Justice League

El día de ayer se dio a conocer el primer trailer internacional de Justice League o lo que es lo mismo “La liga de la justicia“; cabe señalar, que en este nuevo trailer no se…

close

Gothan Brewery, creativo diseño de packaging inspirado en personajes de DC Comics

La inspiración puede venir de cualquier parte desde un sueño hasta el amor por nuestro personaje o universo favorito; tal es el caso del estudiante de diseño Dmitry Kultygin quien ha realizado un genial proyecto de…

notifications Recién publicamos
close