Comment mettre une image dans un bouton HTML ?
Réponses rédigées par Antoine
Dernière mise à jour : 2021-03-09 12:27:17
Question
Comment puis-je mettre une image dans un bouton HTML ?
Réponse
Vous pouvez utiliser le type image pour une balise <input>
, l'image fait alors office de bouton HTML :
<input type="image" alt="Bouton" src="https://www.collaborativejob.com/os.jpg">
Remarque : Cette solution ne permet pas d'écrire un texte sur l'image.
Réponse
Vous pouvez également utiliser la balise <button>
et du code CSS pour mettre une image dans un bouton HTML.
Cette solution permet de superposer un texte sur l'image, les deux formant ainsi le bouton HTML :
<style>
.bouton {
background-image: url('https://www.collaborativejob.com/os.jpg');
background-size: cover;
width: 320px;
height: 220px;
font-size: 3rem;
cursor: pointer;
}
</style>
<button type="submit" class="bouton">Bouton</button>
Exemple sur le Bac à codes.