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

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

 

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

  

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 original, mais je veux changer l’apparence du bouton en myButton:hover (en utilisant une classe myButton:hover ). 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 (comme une vérification). J’ai trouvé des exemples sur le Web pour savoir comment utiliser JavaScript, mais je recherche une solution CSS.

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

Si vous voulez styliser le bouton avec CSS, faites-en un bouton type = “submit” au lieu de type = “image”. type = “image” attend un code SRC, que vous ne pouvez pas définir dans CSS.

Notez que Safari ne vous laissera pas styler comme vous le souhaitez. Si vous avez besoin du support Safari, vous devez placer une image et avoir une fonction onclick qui soumet le formulaire.

Vous pouvez utiliser la . Pour un envoi, ajoutez simplement type="submit" . Utilisez ensuite une image d’arrière-plan lorsque vous souhaitez que le bouton apparaisse en tant que graphique.

Ainsi:

  

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

HTML

 

CSS

 div.myButton input { background:url(https://stackoverflow.com/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’images CSS pour les boutons d’envoi pourrait vous aider.

“En utilisant cette méthode, vous obtenez 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 à un bouton et à l’utiliser comme bouton de soumission en utilisant l’entrée.

Et puisque les bordures des boutons sont effacées, il est également recommandé de changer le curseur du bouton en celui 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:

  

Le CSS utilise une technique de remplacement d’image de base. Pour les points bonus, cela montre l’utilisation d’un sprite d’image:

  

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

  

et puis style 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 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 les versions ultérieures. 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 aussi un curseur main!

 
#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:

  

Ma solution sans js et sans images est la suivante:

* HTML:

  

* 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 avoir le remplacement de l’image, en JavaScript.