no puedo hacer un botón con CSS sprites e input

[artek]

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.

[jeansalas19]

En el botón que hizo el programador (yo soy programador, no te afecta lo que le vas a hacer) puedes ingresarle un class así:

Código HTML:

<div id="descargar-con-input">
	<input type="submit" value="Descargar el archivo PDF completo" title="¡Gratis!" class="descargar-con-boton" />
</div> 

Y luego en tu css haces esto:

Código:

#descargar-con-input {
 	// el Codigo que quieras aca...
}
.descargar-con-boton  {
	background-image:url(images/descargar.png);
	background-position: 0 0;
	text-decoration: none;
	display: block;
	height:54px;
	border:none;
	text-align:center;
}

.descargar-con-boton:hover {
	background-image:url(images/descargar.png);
	background-position: 0 -54px;
	height:54px;
	cursor:pointer;
	border:none;
	text-align:center;
}

Lo que hace es que al hacer el hover, cambia el CSS de abajo, si tienes pregunta responde en el tema.