Hola a todos,
En la realización de un botón rollover de lo más simple e insignificante me encuentro con que por alguna razón que no llego a comprender no acaba de funcionar.
Tendría que ser un botón todo en verde oliva y con las letras en blanco en reposo.
En hover, tendría que dar un fondo blanco, letras en oliva y un borde 2px en oliva a juego con el texto interior.
No me funciona. Algo me falta y no sé qué es.
El botón sería:
<div id=contacto><a href="contacto.html">Contacto</a></div>
Y el CSS:
#contacto {
MARGIN: 0px 0px 0px 0px;
PADDING: 0px;
POSITION: absolute;
FONT-SIZE: 12px;
background: #ff0000;
WIDTH: 122px;
HEIGHT: 24px;
TOP: 0px;
LEFT: 0px;
}
#contacto A {
MARGIN: 22px 0px 22px 0px;
PADDING: 0px 30px 0px 31px;
COLOR: #ffffff;
BACKGROUND: #006600;
BORDER: #006600 2px solid;
TEXT-DECORATION: none;
}
#contacto A:hover {
MARGIN: 22px 0px 22px 0px;
FONT-SIZE: 12px;
FONT-FAMILY: tahoma;
FONT-WEIGHT: bold;
COLOR: #006600;
BORDER: #006600 2px solid;
BACKGROUND: #ffffff;
}
Parece como si el padding correspondiente no funcionase más que en izquierda y derecha. No obedece en inferior y superior. El resultado es que el botón se ve bien a lo largo, pero no a lo alto y bajo, sin borde en el hover en dichas direcciones, ya que el borde sólo aparece en izquierda y derecha.
Extraño (que seguramente será una tontería), pero algo me falta.
Agradecería vuestra ayuda.
Un saludo.