web-dev-qa-db-fra.com

Soumettre l'image du bouton

Je souhaite utiliser une image de bouton d'envoi au lieu du bouton standard. J'ai cherché sur Google et SO et j'ai obtenu plusieurs méthodes différentes.

Quelle est la bonne façon d'utiliser une image comme bouton d'envoi?

Je voudrais également ajouter trois états pour le bouton - normal, survoler, onclick

Ce que j'ai essayé

HTML

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

CSS

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

Ce qui apparaît

enter image description here

Ce qu'il doit afficher

enter image description here

htmlcsssubmit
19
Harsha M V

Modifié:

Je pense que vous essayez de faire comme dans cette --- [~ # ~] démo [~ # ~]

Il existe trois états d'un bouton: normal, survolé et actif

Vous devez utiliser Sprites d'images CSS pour les états des boutons.

Voir Le mystère des sprites CSS 

/*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" />
28
Ahsan Khurshid
<input type="image" src="path to image" name="submit" />

MISE À JOUR:

Pour les états de bouton, vous pouvez utiliser type = "submit" puis y ajouter une classe

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

Ensuite, en CSS, utilisez des images d'arrière-plan pour:

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

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

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

<INPUT TYPE="image" SRC="images/submit.gif" HEIGHT="30" WIDTH="173" BORDER="0" ALT="Submit Form">
Lorsque le bouton d'envoi standard a TYPE="submit", nous avons maintenant TYPE="image". Le type d'image est par défaut un bouton de soumission de formulaire. Plus simple

8
Ibnu

Pour des raisons d'accessibilité, il est très important de toujours spécifier la valeur de la soumission même si vous cachez ce texte ou si vous utilisez <input type="image" .../> pour toujours spécifier alt="" attribut pour ce champ de saisie.

Les aveugles ne savent pas ce que fera un bouton s'il ne contient pas de signification alt="" ou value="".

4
Pawel Wilga

Vous devez supprimer les bordures et ajouter une image d'arrière-plan sur l'entrée.

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

Ça devrait être bien maintenant, normalement.

3
phndiaye