Ejemplo de Botón Con Rollover 1 En CSS
Rollover 1 CSS
Para este ejemplo debemos tener 3 imágenes las cuales funcionarán como;
Reposo
Sobre
Presionado
Luego en el cuerpo de nuestro sitio tenemos esto
Código:
<span id="bot1">
<a href="#2">INICIO</a>
</span>
Y asi para todos nuestros botones, después vamos a tener que hacer uso del CSS, iniciamos con este código:
Código:
#bot1 {
border: 0 0 0 0;
padding: 0;
text-align: center;
}
Donde le decimos que no queremos margen exterior e interior, alineamos el texto al centro, ahora seguimos con este código:
Código:
#bot1 a{
background-image:url(bg_menu_1.jpg);
background-position: center top;
height:30px;
width:100px;
display: block;
color: #990000;
text-decoration: none;
padding-top: 5px;
background-repeat: no-repeat;
font-weight: bold;
}
Que prácticamente es el que hace todo, veamos línea por línea
background-image:url(bg_menu_1.jpg);
Con esto decimos que queremos una imagen de fondo y damos la ruta de esta
background-position: center top;
Con esto estamos indicando que la posición de la imagen de fondo estará centrada y hacia arriba.
background-repeat: no-repeat;
Para que no repita el fondo como si se tratase de un patrón.
height:30px;
width:100;
Le decimos que la altura será de 30 y ancho de 100px que son las dimensiones de nuestras imágenes de fondo.
display:block;
Para que nos genere y respete un recuadro con las medidas que pusimos antes.
color:#990000
Con esto solo le estamos dando un color al texto que se encuentre dentro de nuestra caja.
text-decoration:none;
Es para evitar la linea que esta debajo de los links.
padding-top:5px;
Para que me guarde un espacio de 5px en l aparte superior de nuestro link y con esto baja la posición al centro de nuestro recuadro.
font-weight: bold;
Hace que las letras estén en negrita
Después solo habrá que agregar clases para los pseudos elementos “hover” y “focus”
Código:
#bot1 a:hover{
background-image:url(bg_menu_2.jpg);
}
#bot1 a:focus{
background-image:url(bg_menu_3.jpg);
}
Pero como nos damos cuenta, solo cambiamos la ruta de nuestras imágenes de fondo para lograr el efecto que buscábamos.
El código de nuestro ejemplo de rollover en css se muestra a continuación:
Código:
<html>
<head>
<title>ejemplode.com</title>
<style type="text/css" >
#bot1 {
border: 0 0 0 0;
padding: 0;
text-align: center;
}
#bot1 a{
background-image:url(bg_menu_1.jpg);
height:30px;
width:100px;
background-position: center top;
display: block;
color: #990000;
text-decoration: none;
padding-top: 5px;
background-repeat: no-repeat;
font-weight: bold;
}
#bot1 a:hover{
background-image:url(bg_menu_2.jpg);
}
#bot1 a:focus{
background-image:url(bg_menu_3.jpg);
}
</style>
</head>
<body>
<span id="bot1">
<a href="#2">INICIO</a>
</span>
</body></html>
Y las imágenes las pueden descargar de esta misma página, mediante clic derecho sobre la imágen y guadar como.
¿Cómo citar? Pichardo, A. (s.f.). Ejemplo de Botón Con Rollover 1 En CSS.Ejemplo de. Recuperado el 27 de Septiembre de 2023 de https://www.ejemplode.com/18-css/68-ejemplo_de_boton_con_rollover_1_en_css.html
Últimos 10 comentarios
Muchas gracias :D
Muchas Gracias