
Os mostraremos como crear un botón rollover sin necesidad de usar Javascript, solo con CSS e imagen voluntaria.
Lo podemos hacer de varias maneras, aplicando la clase a un enlace, un div o un button:
Un enlace:
<a href="somelink" class="button"></a>
Un div:
<div onclick="some js function" class="button">< /div>
Un button:
<button type="submit" class="button"></button>
Ahora aplicaremos el código CSS, lo primero va a ser crear una imagen de 180 px de ancho por 60 de alto por ejemplo, así podremos aplicarle la propiedad background-position y convertirlo en un rollover que cambie la posición de la imagen del fondo al poner el cursor por encima de el (hover).
a.button {
display: block;
width: 180px;
height: 60px;
background-image: url(ruta de tu imagen);
background-repeat: no-repeat;
background-position: 0 0;
}
También podemos hacer más corta la propiedad CSS que se relaciona con el background sustituyendo por esto:
background: url(path to image) 0 0 no-repeat;
Aquí está la parte donde el botón se convierte en rollover, aplica este código CSS:
a.button:hover {
background-position; 0 -60px;
}
Si nos damos cuenta, lo único que hemos hecho es cambiarle la posición de la imagen de fondo 60 píxeles más abajo, es decir, hemos desplazado la imagen de fondo para que se pueda ver la imagen del rollover.
Así ya tendremos nuestro botón rollover hecho totalmente en CSS creado y sin usar nada de Javascript.
Vía | Web Monkey
Puedes recibir gratis más artículos por RSS, Twitter, Facebook o correo electrónico. ¡Muchas gracias por leerme!




Por ahora hay 7 comentarios ¿Quieres opinar?
[...] los botones con estado “active” o activo (presionado) en CSS. Usaremos una imagen como rollover crear un botón con estado normal y presionado (active) en CSS. [...]
@Ronald puedes indicar un value=”" (es decir, nada) al input de búsqueda para que no salga el texto Buscar (si sale es porque value “Buscar” está implementado.
Un saludo.
pero si es un boton de busqueda es diferente?? por que si hago esto
sale la imagen pero además la palabra buscar que no quisieramos que salga…
buenas! muy bueno el ejemplo! gracias. quisiera saber como hacer para dejar el fondo del div de cierto color una ves clickeado, es decir cuando está activo. saludos!
@agustin pones la clase en active (: active) y le das al color que quieras. Mira esta entrada, podría ayudarte: http://www.cssblog.es/boton-presionado-con-css/
por que no colocas en ejemplo ?
Buenísimo, lo utilicé sin problema alguno en mi código y funcionó excelente!
Simple y fácil de comprender!.