Intégrer une image dans un bouton en HTML
-
Utilisez la balise
<img>à l’intérieur de la balise<button>pour intégrer l’image dans le bouton HTML -
Utilisez la balise
<input type="image">pour intégrer une image dans le bouton HTML
Cet article présentera plusieurs méthodes pour intégrer une image dans un élément <button> en HTML. Cela signifie corriger ou définir une image à l’intérieur du bouton HTML.
Utilisez la balise <img> à l’intérieur de la balise <button> pour intégrer l’image dans le bouton HTML
Cette balise <img> est utilisée pour intégrer une image sur une page HTML. Les images ne sont pas littéralement placées dans la page Web ; les images sont liées aux pages Web par des chemins donnés. Cette balise génère un espace pour l’image particulière. La balise a deux attributs obligatoires, à savoir src et alt. On peut créer un bouton HTML cliquable en utilisant la balise <button> en HTML. Placer la balise <img> à l’intérieur de la balise <button> crée un bouton HTML cliquable avec une image intégrée.
Par exemple, à l’intérieur du corps HTML, ouvrez la balise <button>. Spécifiez type comme button. Ensuite, ouvrez la balise <img> et spécifiez l’URL de l’image dans l’attribut src. Ensuite, réglez height et width sur 80 et 100 respectivement. Enfin, fermez toutes les balises précédemment ouvertes dans les lignes suivantes.
Dans l’exemple ci-dessous, nous avons créé un élément <button> et inséré une image à l’intérieur pour être intégrée à l’intérieur du bouton. Nous avons utilisé un raccourcisseur d’URL pour placer l’URL courte de l’image dans la balise src. Ainsi, un bouton avec une image peut être créé en HTML.
Exemple de code :
<body>
<button type="button"> <img src="/img/DelftStack/logo.png" height ="90" width="480" /></button>
</body>
Utilisez la balise <input type="image"> pour intégrer une image dans le bouton HTML
La balise <input> spécifie un champ de saisie où nous pouvons entrer nos données. Il existe de nombreux types de saisie et widgets de contrôle autorisés en HTML. Certains d’entre eux sont <input type="button">, <input type="color">, <input type="email">, <input type="text">. Nous pouvons définir l’attribut type sur image et définir le src pour intégrer une image dans le type d’entrée. Il fonctionnera comme un bouton.
Par exemple, à l’intérieur du corps HTML, ouvrez la balise <input> et spécifiez type à image. Tapez ensuite l’URL de l’image dans l’attribut src. Ensuite, écrivez l’attribut style et définissez la border sur double. Aussi, ajoutez la height et la width comme 80 et 170. Ensuite, fermez la balise input et toutes les balises précédemment ouvertes.
L’exemple ci-dessous illustre une méthode pour intégrer une image dans une page HTML. La balise <type="image"> précise que nous insérons ou utilisons une image dans notre travail. Nous avons utilisé le CSS en ligne pour définir la border, la height et la width de l’image. Nous avons fait cela pour que l’image ressemble plus à un bouton. La valeur double spécifie qu’une double bordure est utilisée en dehors du bouton image. La hauteur et la largeur aident l’image à atteindre une taille définie. Si nous ne spécifions pas la hauteur et la largeur d’une image, la page peut clignoter lors du chargement de l’image. De cette façon, nous pouvons intégrer une image dans un bouton HTML.
Exemple de code :
<input type="image" src="/img/DelftStack/logo.png" style="border: double;" height="90" width="480"/>
Sushant is a software engineering student and a tech enthusiast. He finds joy in writing blogs on programming and imparting his knowledge to the community.
LinkedIn