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

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

Comme ça:

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

Plus d'Informations: 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 de l'image css pour les boutons de soumission pourrait vous aider.

"en Utilisant cette méthode, vous obtiendrez une image cliquable lorsque les feuilles de styles sont actifs, et un bouton standard lorsque les feuilles de styles sont désactivés. L'astuce consiste à appliquer les méthodes image replace à une balise button et à l'utiliser comme bouton submit, au lieu d'utiliser input.

Et puisque les bordures de bouton sont effacées, il est également recommandé de changer le curseur du bouton pour la main en forme de celui utilisé pour les liens, depuis cela fournit une pointe visuelle 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 environnant supplémentaire:

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

Le CSS utilise une technique de remplacement d'image de base. Pour les points bonus, il s'affiche en utilisant un sprite 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/

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

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

Et puis le style de fond 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 variation sur les réponses précédentes. J'ai trouvé que l'opacité doit être définie, bien sûr cela fonctionnera dans IE6 et on. 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 un curseur à la main aussi bien!

<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;
}

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;
}

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 que vous pourriez simplement importer un .fichier js ainsi et ont le remplacement de l'image là, en JavaScript.