Changer l'arrière plan d'un bouton (CSS)

Résolu

nico3fr Messages postés 34 Date d'inscription Statut Membre Dernière intervention -
122 - 8 déc. 2016 à 12:23

Bonjour,

Je souhaiterais créer un bouton dans un formulaire qui change d'état lorsque l'on passe la souris dessus.
Rien de vraiment dur dis comme ca...

Les contraintes :
- Que ca marche sous IE et Firefox
- Pas de javascript

Et voici mes problèmes plus en détails, ca expliquera certainement mieux ce que je souhaite et les problèmes rencontrés.

Tout d'abord du code qui marche sous firefox... Mais pas sous internet explorer

<?php
  if (isset($_POST['ma_variable']))
    print("post ok<br>");
  if (isset($_POST['ma_variable']) && (!empty($_POST['ma_variable']))){
    extract($_POST);  // On réccupère les données du _POST qu'on place dans des variables $recrut, etc...
    print("ma_variable : $ma_variable<br>");
  }

?>

<html>
  <head>
    <title>Page web</title>
  </head>
  
    <style type="text/css">
    button {
      background-color: transparent;
      background-image: url(images/bouton.png);
      background-repeat: no-repeat;
      width: 120px;
      height: 14px;
      margin: 5px auto;
      border: none;
      text-align: center;
      font-family: Verdana, Arial, Helvetica, Geneva, sans-serif;
      font-size: 11px;
      text-decoration: none;
    }

    button:hover, button:active {
      background-image: url(images/bouton.png);
      color: #FF7200;
    }
    </style>
  
  
  <body>
  <br><p>Une simple bouton sur une page...<br></p><br>
    <form method="post" action="firefox.php">
      <button type="submit" value="1" name="ma_variable" class="button">1</button>
    </form>
    <a href="firefox.php">Recharger la page sans post</a>
  </body>
</html>

Et ici du code qui "marche" sous IE, mais pas sous firefox

<?php
  if (isset($_POST['ma_variable']))
    print("post ok<br>");
  if (isset($_POST['ma_variable']) && (!empty($_POST['ma_variable']))){
    extract($_POST);
    print("ma_variable : $ma_variable<br>");
  }

?>

<html>
  <head>
    <title>Page web</title>
  </head>
  
    <style type="text/css">
    .button_cache{
      width: 120px;
      height: 14px;
      background: transparent;
      border: 0px;
      text-decoration: none;
      font-family: Verdana, Arial, Helvetica, Geneva, sans-serif;
      font-size: 11px;
      padding: 0px; 
      text-align: center;
    }
    
    a.button {
      background-color: transparent;
      background-image: url(images/bouton.png);
      background-repeat: no-repeat;
      width: 120px;
      height: 14px;
      margin: 5px auto;
      border: none;
      text-align: center;
      font-family: Verdana, Arial, Helvetica, Geneva, sans-serif;
      font-size: 11px;
      text-decoration: none;
    }

    a.button:hover, a.button:active {
      background-image: url(images/bouton2.png);
      color: #FF7200;
    }
    </style>
  
  
  <body>
  <br><p>Une simple bouton sur une page...<br></p><br>
    <form method="post" action="ie.php">
      <a href="" class="button"><input type="submit" value="1" name="ma_variable" class=button_cache></a>
    </form>
  </body>
</html>

Alors les explications maintenant.
Dans le premier cas, celui qui marche sous firefox et pas sous IE, c'est visiblement à cause du fait que l'attribut :hover ne s'applique qu'a une balise "lien" (<a href="blabla">) sous internet explorer, alors que firefox semble donné un peu plus de liberté.
Donc sous IE, je n'arrive pas à voir ma seconde image de fond, ni le changement de couleur appliqué dans la class button:hover

Donc j'ai essayé de tricher un peu avec la 2e méthode, qui semble fonctionner sous IE (juste la couleur du lien qui ne fonctionne pas avec le hover (color: #FF7200)). Sinon, il charge correctement l'image bouton2.png lorsque je passe la souris sur le bouton.
Par contre, le gros probleme sous firefox, c'est qu'il semble favoriser la balise du lien <a> par rapport à la balise <input>, donc en fait, il n'envoie pas de formulaire lorsque je clique sur le bouton...

Enfin, bref, j'ai l'impression de tourner un peu en rond depuis hier. Donc si quelqu'un à une solution qui marche sous les 2 systemes, ca m'interesse grandement.

Merci

PS: Je sais pas si j'ai été très clair, hésitez pas à poser des questions ;)

A voir également:

Bouton css
Bouton shift pc ✓ - Forum Windows
Quel est la touche shift sur le clavier ✓ - Forum Jeux vidéo
Bouton on off ✓ - Forum Loisirs / Divertissements
Bouton reinitialisation pc - Guide
Diagnostic bouton photo - Accueil - Outils

9 réponses

Réponse 1 / 9

Dalida Messages postés 6728 Date d'inscription Statut Contributeur Dernière intervention 922

salut,

il ne faudrait mettre le '<input>' dans un lien, cela n'a pas de sens.

donc essai de coder le même comportement mais sur le '<input>'.
sinon pour le défaut d'affichage, je pense qu'il manque un {display:block;} dans le sélecteur 'a.button'.

Réponse 4 / 9

Dalida Messages postés 6728 Date d'inscription Statut Contributeur Dernière intervention 922

re,

Mais le :hover ne marche que sur les liens dans internet explorer
ah oui ! je l'oublie à chaque fois celle-là !

je viens de faire les essais avec '<input>' dans un lien, ça fonctionne au poil même sous IE6.
utilise cette technique plutôt que de priver les utilisateur de IE6, ils ont encore très nombreux !!!

j'ai utilisé ça :

form a input
{
border:none;
padding-left:24px; /* pour décaler le texte, qu'il ne chevauche pas mon image*/
background-color:transparent;
cursor: pointer;
}
form a
{
background-image:url(ressources/fail.png);
background-repeat:no-repeat;
background-color:#aaa;
text-decoration:none;
}
form a:hover
{
background-image:url(ressources/success.png);
}

<form action="#" method="get">
            <a href="#"><input type="submit" value="Valider" title="ok" /></a>
</form>

Réponse 7 / 9

nico3fr Messages postés 34 Date d'inscription Statut Membre Dernière intervention 5

Merci Jérémy, mais je préfèrerais éviter le javascript.

De toute facon, a priori mon probleme à pas vraiment de solutions tel que je le souhaiterais.
A priori, la première solution doit marcher sur IE >= 6
Donc, je crois que je vais garder la première syntaxe, et les utilisateurs auront cas avoir une version d'IE >= 6 pour avoir de jolies petits effets. Sinon, ils auront cas faire comme tout le monde et installer firefox :D

122

Lalaina

Michel

Réponse 9 / 9

Keulig

La balise button ça existe ;)

<button type="submit">Valider</button>

et voilà :)

tim974 Messages postés 6 Date d'inscription Statut Membre Dernière intervention

La balise button ça existe ;)

<button type="submit">Valider</button>

mais encore ?

Sinon je rencontre aussi la même difficulté et je n'ai toujours pas trouvé une reponse universelle à chaque navigateur.

Nxt Messages postés 41 Date d'inscription Statut Membre Dernière intervention 18 > tim974 Messages postés 6 Date d'inscription Statut Membre Dernière intervention

<style type="text/css">
button {
	padding: 3px 30px;
	background-color: #FFECEC;
	border: 1px solid #990000;
}
button:hover {
	background-color: #ECFFEC;
	border: 1px solid #009900;
}
</style>
<button type="submit">Pwet</button>

Discussions similaires

taille des input

Souligné au survol d’un hyperlien

agrandir une image au passage de la souris

Centrer un tableau

Ajustement automatique taille de la page

CSS simple : mettre texte en bas

Votre réponse

Discussions similaires