- Ejemplo de Carta de Recomendación
- Ejemplo de Curriculum Vitae en Word
- Ejemplo de Palabras Esdrújulas
- Ejemplo de Palabras Graves
- Ejemplo de Palabras Agudas
- Ejemplo de Sustantivo
- Ejemplo de Metáfora
- Ejemplo de Modelo de Carta de Solicitud
- Ejemplo de Memorándum
- Ejemplo de Carta poder
- Ejemplo de Sinónimos
- Ejemplo de Ensayo
- Ejemplo de Carta de Renuncia
- Ejemplo de Palabras sobresdrújulas
- Ejemplo de Antonimos
- Ejemplo de Palabras Homófonas
- Ejemplo de Conversación en Inglés
- Ejemplo de Diptongos
- Ejemplo de Encuesta
- Ejemplo de Hiato
- Ejemplo de Carta compromiso de conducta al director
- Ejemplo de Oraciones unimembres
- Ejemplo de Oraciones bimembres
- Ejemplo de Carta responsiva menor de edad
- Ejemplo de Palabras agudas sin acento
- Ejemplo de Angustia
- Ejemplo de Sociopatía
- Ejemplo de Instinto
- Intolerancia a la lactosa
- Ejemplo de Demanda por alimentos
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
[codigo]
<span id="bot1">
<a href="#2">INICIO</a>
</span>[/codigo]
Y asi para todos nuestros botones, después vamos a tener que hacer uso del CSS, iniciamos con este código:
[codigo]
#bot1 {
border: 0 0 0 0;
padding: 0;
text-align: center;
}[/codigo]
Donde le decimos que no queremos margen exterior e interior, alineamos el texto al centro, ahora seguimos con este código:
[codigo]
#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;
}[/codigo]
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”
[codigo]
#bot1 a:hover{
background-image:url(bg_menu_2.jpg);
}
#bot1 a:focus{
background-image:url(bg_menu_3.jpg);
}[/codigo]
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:
[codigo]
<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>[/codigo]
Y las imágenes las pueden descargar de esta misma página, mediante clic derecho sobre la imágen y guadar como.
Si no encontraste lo que buscabas, prueba la búsqueda:
Ejemplos relacionados
Ejemplo de Sangría en CSS
Ejemplo de Imagen de fondo en CSS
Ejemplo de Cambiar el color del texto con CSS
Ejemplo de Propiedades del texto con CSS
Últimos 13 comentarios en Ejemplo de Botón con Rollover 1 en CSS
01.02.12 a las 22:24:54
06.03.11 a las 18:22:23
07.09.10 a las 12:46:08
06.09.10 a las 12:07:13
03.18.10 a las 4:54:54
Muchas gracias :D
03.09.10 a las 21:42:03
Muchas Gracias
12.10.09 a las 17:50:45
11.24.09 a las 15:39:15
09.19.09 a las 7:21:57
05.28.09 a las 18:14:08
10.22.08 a las 16:32:35
06.27.08 a las 5:35:01
06.03.08 a las 4:52:47