Discussion :

[derou123]

Bonjour,

Salut

J'ai un code de bouton qui marche bien

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[NoSmoking]

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[abdennour bouaicha]

joue avec les classes des boutons:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.style2{
 background-color:green;
}