Mettre une image dans un bouton

Bonjour,

Salut

J'ai un code de bouton qui marche bien

Code:

---

1 2 3

<form><input class="MyButton" type="button" value="PIZZA" onclick="window.location.href='http://oklafood.com/food/index.php?route=product/category&path=20'" /> </form>

---

Je veux le même button avec le même style mais au lieu d'écrire " PIZZA " je veux mettre une image mais garder le même style de bouton déclarer dans la CSS " image buttons"

Code:

---

1 2 3 4

<form> <input class="MyButton" type="image" src="https://www.charme-caractere.xyz/application/webroot//images/rewards/gift.png" alt="Vider le panier" value="PIZZA" href='http://oklafood.com/food/index.php?route=product/category&path=33'"/> </form>

---

Bonjour,
il existe un élément qui permet de faire cela, le <button>.

Code:

---

1 2 3

<button onclick="window.location.href='http://www.developpez.net/forums/f9/webmasters-developpement-web/'"> <img src="https://gabarit.developpez.be/images/logo-dvp-h55.png" alt="logo DVP"> </button>

---

joue avec les classes des boutons:

Code:

---

1 2 3 4 5 6 7

<input type="submit" class="syleComun style1" value="bouton 1" /> <input type="submit" class="syleComun style2" value="bouton 2" /> . . . <input type="submit" class="syleComun styleN" value="bouton N" />

---

et dans le css la classe syleComun c'est la classe qui va imposer un même style sur tous les boutons:

Code:

---

1 2 3 4

.syleComun{ width:200px; height:50px; }

---

et dans les classes style1,...styleN tu as la liberté de personnaliser chaque bouton ,par exemple une par une image:

Code:

---

1 2 3 4 5 6

.style1 { background-image: url(image.jpg); background-repeat: no-repeat; background-size: 100% 100%; background-position: 0 0; }

---

une autre par un tel couleur:

Code:

---

1 2 3

.style2{ background-color:green; }

---