Optimiza tus imágenes gratis sin perder calidad y mejora la velocidad de tu página web: Compresor de Imágenes JPG/PNG/GIF

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

Divertidas fotografías de animales que parecen posar para su nuevo album

En BoredPanda han recopilado alguna fotografías que nos sacarán una sonrisa; las cuales, están centradas en diversos grupos de animales que parece que posan para la portada de su nuevo álbum musical. Estas divertidas fotografías…

close

Ménage à Tetris, una curiosa animación sobre dos piezas de Tetris

Ménage à Tetris, es uno de los 10 filmes que vieron la luz durante el TEDxSydney 2017; en esta animación veremos los problema que pasan 2 piezas de tetris para consumar su amor; no sin…

close

Ingeniosas esculturas tipográficas por Trevor Wheatley

El arte y la tipografía pueden ir más íntimamente ligados el uno al otro; eso lo demuestra el artista de origen Canadiense Trevo Wheatley; el cual, ha realizado unas visualmente impresionantes esculturas inspiradas en la…

close

Creativos afiches publicitarios inspirados en juegos por Fernando Reza

El día de hoy quiero compartir con ustedes unas creativas ilustraciones de afiches publicitarios creados por el artista e ilustrador Fernando Reza; estas creativas ilustraciones son muestras de propaganda que atacan a héroes y villanos…

close

Cubetto, el robot para enseñar los principios de la programación a niños

Este genial juguete es una apuesta de Primo Toys; el cual, está pidiendo apoyo mediante Kickstarter, donde señalaba que para iniciar su producción y comercialización necesitaba por lo menos $100,000 dólares; mismos que fueron superados hasta llegar…

close

Como reemplazar el cielo de una fotografía en 2 minutos

Peter McKinnon es un fotógrafo que se ha decidido realizar un útil tutorial de como reemplazar el cielo en cualquier fotografía en menos de 2 minutos; algo que generalmente por el publico en general como el…

notifications Recién publicamos
close