Foros del Web » Creando para Internet » CSS »

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

Estas en el tema de no puedo hacer un botón con CSS sprites e input en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 01/05/2009, 20:50
 
Fecha de Ingreso: septiembre-2006
Mensajes: 19
Antigüedad: 11 años, 2 meses
Puntos: 0
no puedo hacer un botón con CSS sprites e input

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.
  #2 (permalink)  
Antiguo 19/05/2009, 00:55
Avatar de jeansalas19  
Fecha de Ingreso: junio-2006
Mensajes: 20
Antigüedad: 11 años, 6 meses
Puntos: 0
Respuesta: no puedo hacer un botón con CSS sprites e input

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.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 00:14.