En el tutorial "Crear menus de navegación en CSS usando listas" está la solución:
Experimentando
Para este ejemplo, use una imagen de fondo, para el evento hover, con un pequeño truco, veamos el codigo:
Código :
ul li a {
display:block;
width:100px;
padding:40px 10px 4px 10px;
text-decoration:none;
text-align:right;
font-size:11px;
color:#666666;
background-image:url(images/boton1.png); //Aqui solo se ve la parte de arriba de la imagen
border:1px solid #666666;
}
ul li a:hover {
color:#000000;
background-position:bottom; //Aqui muestro la parte de abajo de la imagen
} Para hacer los botones altos, le he agregado 40px de relleno superior, de esta forma agrando el boton dejando el texto abajo, le he cambiado la alineación a la derecha, y, como se puede ver en el código, la imagen de fondo la he puesto en el vínculo directamente, no en el evento hover, y en este solo le cambio la posición. El detalle es que la imagen es el doble de tamaño que el botón:
Una sola imagen con ambos estados.
Por qué hago esto? La idea es cargar una sola imagen, y hacerlo al cargar la pagina, si pedimos que en el evento hover se cargue una imagen aparte, esta solo sera cargada al poner el cursor encima del botón, en conexiones lentas, suele haber un tiempo de descarga de la imagen que supera a la ación del usuario, lo que ocasiona que nunca vea la imagen del evento hover. Con este método, nos aseguramos que la imagen es cargada desde el principio y no hay espera.
