Comment changer une image de bouton d'entrée en utilisant CSS?

Ainsi, je peux créer un bouton d'entrée avec une image en utilisant

<INPUT type="image" src="/images/Btn.PNG" value="">

Mais, je ne peux pas obtenir le même comportement en utilisant CSS. Par exemple, j'ai essayé

<INPUT type="image" class="myButton" value="">

où "myButton" est défini dans le fichier CSS comme

.myButton {
    background:url(/images/Btn.PNG) no-repeat;
    cursor:pointer;
    width: 200px;
    height: 100px;
    border: none;
}

Si c'est tout ce que je voulais faire, je pourrais utiliser le style d'origine, mais je veux changer l'apparence du bouton en survol (en utilisant une myButton:hoverclasse). Je sais que les liens sont bons, car j'ai pu les charger pour une image d'arrière-plan pour d'autres parties de la page (juste pour vérifier). J'ai trouvé des exemples sur le Web de la façon de le faire en utilisant JavaScript, mais je recherche une solution CSS.

J'utilise Firefox 3.0.3 si cela fait une différence.

Si vous souhaitez styliser le bouton en utilisant CSS, faites-en un bouton type = "soumettre" au lieu de type = "image". type = "image" attend un SRC, que vous ne pouvez pas définir dans CSS.

Notez que Safari ne vous permettra pas de styliser un bouton de la manière que vous recherchez. Si vous avez besoin du support Safari, vous devrez placer une image et disposer d'une fonction onclick qui soumet le formulaire.

Vous pouvez utiliser la <button>balise. Pour une soumission, ajoutez simplement type="submit". Utilisez ensuite une image d'arrière-plan lorsque vous souhaitez que le bouton apparaisse sous forme de graphique.

Ainsi:

<button type="submit" style="border: 0; background: transparent">
    <img src="/images/Btn.PNG" width="90" height="50" alt="submit" />
</button>

Plus d'infos: http://htmldog.com/reference/htmltags/button/

HTML

<div class="myButton"><INPUT type="submit" name="" value=""></div>

CSS

div.myButton input {
    background:url(/images/Btn.PNG) no-repeat;
    cursor:pointer;
    width: 200px;
    height: 100px;
    border: none;
}

Cela fonctionnera n'importe où, même dans Safari.

Cet article sur le remplacement d'image CSS pour les boutons d'envoi pourrait vous aider.

"En utilisant cette méthode, vous obtiendrez une image cliquable lorsque les feuilles de style sont actives, et un bouton standard lorsque les feuilles de style sont désactivées. L'astuce consiste à appliquer les méthodes de remplacement d'image à une balise de bouton et à l'utiliser comme bouton d'envoi, au lieu de à l'aide de l'entrée.

Et comme les bordures des boutons sont effacées, il est également recommandé de changer le curseur du bouton en un curseur en forme de main utilisé pour les liens, car cela fournit un conseil visuel aux utilisateurs.

Le code CSS:

#replacement-1 {
  width: 100px;
  height: 55px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent url(image.gif) no-repeat center top;
  text-indent: -1000em;
  cursor: pointer; /* hand-shaped cursor */
  cursor: hand; /* for IE 5.x */
}

#replacement-2 {
  width: 100px;
  height: 55px;
  padding: 55px 0 0;
  margin: 0;
  border: 0;
  background: transparent url(image.gif) no-repeat center top;
  overflow: hidden;
  cursor: pointer; /* hand-shaped cursor */
  cursor: hand; /* for IE 5.x */
}
form>#replacement-2 { /* For non-IE browsers*/
  height: 0px;
}

Voici une solution plus simple mais sans div supplémentaire autour:

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

Le CSS utilise une technique de remplacement d'image de base. Pour les points bonus, il s'affiche à l'aide d'un sprite d'image:

<style>
    input[type="submit"] {
        border: 0;
        background: url('sprite.png') no-repeat -40px left;
        text-indent: -9999em;
        line-height:3000;
        width: 50px;
        height: 20px;
    }
</style>

Source: http://work.arounds.org/issue/21/using-css-sprites-with-input-type-submit-buttons/

Voici ce qui a fonctionné pour moi sur Internet Explorer, une légère modification de la solution par Philoye.

>#divbutton
{
    position:relative;
    top:-64px;
    left:210px;
    background: transparent url("../../images/login_go.png") no-repeat;
    line-height:3000;
    width:33px;
    height:32px;
    border:none;
    cursor:pointer;
}

Vous pouvez utiliser blank.gif (image transparente 1px) comme cible dans votre tag

<input type="image" src="img/blank.gif" class="button"> 

puis stylisez l'arrière-plan en css:

.button {border:0;background:transparent url("../img/button.png") no-repeat 0 0;}
.button:hover {background:transparent url("../img/button-hover.png") no-repeat 0 0;}

Une variante des réponses précédentes. J'ai trouvé que l'opacité doit être définie, bien sûr, cela fonctionnera dans IE6 et autres. Il y avait un problème avec la solution de hauteur de ligne dans IE8 où le bouton ne répondait pas. Et avec cela, vous obtenez également un curseur de main!

<div id="myButton">
  <input id="myInputButton" type="submit" name="" value="">
</div>

#myButton {
 background: url("form_send_button.gif") no-repeat;
 width: 62px;
 height: 24px;
 }

#myInputButton { 
 background: url("form_send_button.gif") no-repeat;
 opacity: 0;
 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 filter: alpha(opacity=0);
 width: 67px;
 height: 26px;
 cursor: pointer;
 cursor: hand;
}

Je pense que ce qui suit est la meilleure solution:

css:

.edit-button {
    background-image: url(edit.png);
    background-size: 100%;
    background-repeat:no-repeat;
    width: 24px;
    height: 24px;
}

html:

<input class="edit-button" type="image" src="transparent.png" />

Ma solution sans js et sans images est la suivante:

* HTML:

<input type=Submit class=continue_shopping_2 
name=Register title="Confirm Your Data!" 
value="confirm your data">

* CSS:

.continue_shopping_2:hover{
background-color:#FF9933;
text-decoration:none;
color:#FFFFFF;}


.continue_shopping_2{
padding:0 0 3px 0;
cursor:pointer;
background-color:#EC5500;
display:block;
text-align:center;
margin-top:8px;
width:174px;
height:21px;
border-radius:5px;
border-width:1px;
border-style:solid;
border-color:#919191;
font-family:Verdana;
font-size:13px;
font-style:normal;
line-height:normal;
font-weight:bold;
color:#FFFFFF;}

Peut-être pourriez-vous simplement importer un fichier .js et y faire remplacer l'image, en JavaScript.

Supposons que vous ne puissiez pas changer le type d'entrée, ni même le src. Vous avez UNIQUEMENT des CSS pour jouer.

Si vous connaissez la hauteur souhaitée et que vous avez l'URL d'une image d'arrière-plan que vous souhaitez utiliser à la place, vous avez de la chance.

Réglez la hauteur sur zéro et le haut du rembourrage sur la hauteur souhaitée. Cela mettra l'image originale hors de vue, vous donnant un espace parfaitement propre pour montrer votre image d'arrière-plan css.

Fonctionne dans Chrome. Aucune idée si cela fonctionne dans IE. Rien d'intelligent ne le fait, donc probablement pas.

#daft {
  height: 0;
  padding-top: 100px;
  width: 100px;
  background-image: url(clever.jpg);
}

<input type="image" src="daft.jpg" id="daft">