Enviar imagen de botón

Quiero utilizar una imagen de botón Enviar en lugar del botón estándar. Busqué en Google y SO y obtuve algunas formas diferentes.Enviar imagen de botón

¿Cuál es la forma correcta de utilizar una imagen como botón Enviar?

También me gustaría añadir tres estados para el botón - normal, flotar, onclick

lo que he intentado

HTML

<input type="submit" value="Subscribe">

CSS

input[type=submit] { 
    background:url(../images/btn-subscribe.gif) none; 
    text-indent:-9999px; 
    width:109px; 
    height:41px; 
}

lo que se muestra hasta

enter image description here

Lo que debe mostrar

enter image description here

Fuente

2012-08-02 Harsha M V

Elimine 'text-indent' y agregue' value = "Subscribe" 'en' 'o agregue las letras' Subscribe' en la imagen – asprin

@Harsha M V: Vea mi respuesta a continuación. –

Editado:

Creo que está tratando de hacer lo que hacen en este DEMO

Hay tres estados de un botón: normal, flotar y activo

Debe usar CSS Image Sprites para los estados del botón.

See The Mystery of CSS Sprites

/*CSS*/ 
 

 
.imgClass { 
 
background-image: url(http://inspectelement.com/wp-content/themes/inspectelementv2/style/images/button.png); 
 
background-position: 0px 0px; 
 
background-repeat: no-repeat; 
 
width: 186px; 
 
height: 53px; 
 
border: 0px; 
 
background-color: none; 
 
cursor: pointer; 
 
outline: 0; 
 
} 
 
.imgClass:hover{ 
 
    background-position: 0px -52px; 
 
} 
 

 
.imgClass:active{ 
 
    background-position: 0px -104px; 
 
}

<!-- HTML --> 
 
<input type="submit" value="" class="imgClass" />

Fuente

2012-08-02 07:05:40

gracias .... :) –

Sea bienvenido –

con sprites Por lo general, me mantengo alejado de la taquigrafía de 'fondo para minimizar la repetición. Use 'background-image' en' .imgClass' y 'background-position' para los otros estados –

<input type="image" src="path to image" name="submit" />

ACTUALIZACIÓN:

Para estados de botón, puede utilizar type = "submit" y luego añadir una clase para que

<input type="submit" name="submit" class="states" />

Luego en css, utilizar imágenes de fondo para:

.states{ 
background-image:url(path to url); 
height:...; 
width:...; 
} 

.states:hover{ 
background-position:...; 
} 

.states:active{ 
background-position:...; 
}

Fuente

2012-08-02 06:44:34 asprin

está agregando el nombre = ¿enviar la clave? –

no la clave está agregando el tipo = "imagen" – Ibu

¿Qué sucede si quiero agregar estados de botón? –

Tienes que eliminar las fronteras y añadir una imagen de fondo en la entrada.

.imgClass { 
    background-image: url(path to image) no-repeat; 
    width: 186px; 
    height: 53px; 
    border: none; 
}

Debería ser bueno ahora, normalmente.

Fuente

2012-08-02 09:34:05 phndiaye

<INPUT TYPE="image" SRC="images/submit.gif" HEIGHT="30" WIDTH="173" BORDER="0" ALT="Submit Form">
Cuando el botón estándar de presentar tiene TYPE="submit", ahora tenemos TYPE="image". El tipo de imagen es por defecto un botón de envío de formulario. Más simple

Fuente

2013-03-16 03:57:19 Ibnu

Es muy importante por razones de accesibilidad que siempre especifique el valor del envío incluso si está ocultando este texto, o si usa <input type="image" .../> para especificar siempre el atributo alt="" para este campo de entrada.

Las personas ciegas no saben qué botón va a hacer si no contiene alt="" o value="".

Fuente

2013-03-19 12:25:15

Respuesta

Cuestiones relacionadas