Hola, me surgió el siguiente problema para hacer un botón con 2 estados que dentro tiene un input.
A continuación les dejo un ejemplo de como es el botón que utilizo habitualmente
En el html: Código HTML:
<div id="descargar-con-a">
<a title="¡Gratis!" href="#">Descargar el<br /> archivo PDF completo</a>
</div>
En el CSS:
Código:
#descargar-con-a {
width:159px;
height:54px;
}
#descargar-con-a a:link,
#descargar-con-a a:visited {
background-image:url(images/descargar.png);
background-position: 0 0;
text-decoration: none;
display: block;
height:54px;
text-align:center;
}
#descargar-con-a a:hover {
background-image:url(images/descargar.png);
background-position: 0 -54px;
height:54px;
text-align:center;
}
Y a continuación el código con el input, sucede que esto lo adamptó un programador y lo tengo que dejar así para que funcione. Personalmente no tengo idea por que en el estilo css declaró "input[type="submit"]", pero supongo que es impresicindible para que funcione lo que programó.
En el html: Código HTML:
<div id="descargar-con-input">
<input type="submit" value="Descargar el archivo PDF completo" title="¡Gratis!" />
</div>
En el CSS:
Código:
#descargar-con-input {
width:159px;
height:54px;
}
#descargar-con-input input[type="submit"] {
width:159px;
background-image:url(images/descargar.png);
background-position: 0 0;
text-decoration: none;
display: block;
height:54px;
text-align:center;
}
Aquí les dejo un link con los ejemplos funcionando para que lo puedan ver funcionando, examinar con con firebug o bajar:
chocolatedonas.brinkster[punto]net/boton-input/
Lo que necesito poder hacer es que al botón con input le funcione el estado hover y poder poner el texto en 2 líneas.
Desde ya muchas gracias,
Artek.