5568 sujets

Sémantique web et HTML

Creer un button avec text + image

Modérateur
et l'eau,


<a href=""><span>mon texte</span><img src="https://www.i-cad.fr/uploads/580e2a943bee5.jpeg" alt="" /></a>

<button type="button"><span>mon texte</span><img src="https://www.i-cad.fr/uploads/580e2a943bee5.jpeg" alt="" /></button>

Modifié par niuxe (21 Jun 2019 - 21:51)
Et si c'est pour avoir un bouton que tu réutilises plusieurs fois (genre un bouton "Valider" avec l'image d'une coche) tu peux aussi le faire en css avec une classe du genre:

.mon_bouton_valider {
    display: block;
    width:  200px;
    height:  40px;
}
.mon_bouton_valider:after {
    background-image: url("coche_verte.png");
    background-repeat: no-repeat;
  	background-position: right;
  	background-size: 35px;
}
Benoist28220 Il y a vraiment beaucoup de façon de creer un boutton avec une img soit en background, sois incrémenter en balise sois avec les balise button, input, tcheckbox, etc..

exemple:

1.
<a href="#!" style=" background-image: url("coche_verte.png");"> MON BOUTTON </a>
2.
<h3>
<p>MON BOUTTON</p>
<img src="..."></img>
</h3>
3.
<h3>
MON BUTTON
<img src="..."/>
</h3>

Ensuite reste le CSS.

sinon il y a codepen qui pourras t'aider.
https://codepen.io/tag/buttons/
Sujet clos
Aller à