Image du bouton CSS
Exemple 01: Utilisation de la balise de style CSS pour ajouter une image dans un bouton dans un fichier HTML
Dans cet exemple, nous ajouterons une image à l'intérieur d'un bouton à l'aide de la balise de style CSS dans l'en-tête de fichier. À l'intérieur de la balise de style, nous construirons une classe pour le bouton, qui sera appelé plus tard dans le corps. Ensuite, nous créerons un script dans lequel nous ajouterons une image à un bouton en utilisant la technique que nous avons mentionnée précédemment.
Dans le script précédent, nous avons ouvert une balise de style dans l'en-tête de fichier. Dans cette balise, nous ouvrons les paramètres de classe de bouton dans lesquels nous définirons plusieurs propriétés de conception pour l'élément bouton. Tout d'abord, nous ajoutons l'image pour l'arrière-plan du bouton. Nous pouvons ajouter l'image via «URL» ou «SRC». Ensuite, nous ajoutons la propriété de taille arrière qui est indiquée comme une «couverture». Ensuite, nous définissons également la largeur et la hauteur du bouton. Après cela, nous fermons la balise de style et passons à la balise corporelle. Dans cette balise, nous ajoutons une rubrique en utilisant la balise H1. Ensuite, la balise de bouton est appelée. Dans cette balise, nous appelons la classe de style que nous avons créée plus tôt pour hériter de tout le style qui est défini dans la classe. Ensuite, nous fermons toutes les balises restantes et enregistrons le fichier au format HTML.
Comme nous pouvons le voir dans la sortie précédente, l'image apparaît comme un bouton sur la page de notre navigateur avec le titre. Cela justifie que la classe de style a été héritée avec succès par la balise de bouton.
Exemple 02: Ajout d'une image dans un bouton à l'aide d'une approche CSS en ligne
Dans ce cas, nous ajouterons une image à un bouton en utilisant l'approche CSS en ligne. Nous ajouterons une image à un élément de bouton par défaut du langage de balisage hypertexte en lui donnant une URL d'une image dans cette méthode. Maintenant, jetons un coup d'œil au script de cette technique.:
Dans le script reflété dans l'image, nous pouvons voir que l'en-tête de fichier est vide car nous utiliserons l'approche CSS en ligne dans cet exemple. Nous ouvrons notre balise de bouton. Dans la balise, nous mentionnons le CSS que nous voulons que le bouton ait dans la propriété de style. Nous mentionnons tout le style de cette propriété et les séparons avec des demi-colons. Nous ajoutons également une image en utilisant le mot clé de l'image d'arrière-plan et attribuons une image via URL. Ensuite, la balise de bouton est fermée avec l'étiquette corporelle. Après cela, nous ouvrons ce fichier HTML sur notre navigateur.
La sortie précédente est une preuve que l'approche de balise de style en ligne a été un succès. Nous pouvons voir que l'image est ajoutée au bouton et que le bouton par défaut est maintenant transformé en image.
Exemple 03: Utilisation des balises de style CSS pour ajouter une image à un bouton lorsqu'il plane
Nous ajouterons une image à un bouton qui n'apparaîtra que lorsque le bouton sera plané dans cet exemple. Nous utiliserons la balise de style CSS pour fournir un bouton avec un tel comportement dans un fichier HTML. Nous créerons une classe distincte pour séparer ce style pour un élément spécifique dans cet exemple. Pour atteindre cet objectif, nous devons écrire le script suivant:
Dans le script précédent, nous avons ouvert notre balise de tête pour le fichier HTML. Dans cette balise, le style du bouton est défini en ouvrant une classe pour l'élément bouton. Dans cette classe, nous définissons d'abord la largeur et la hauteur du bouton. Ensuite, nous ajoutons une propriété qui transforme le curseur en pointeur, et nous donnons également au texte une taille raisonnable. Ensuite, nous ajoutons une méthode héréditaire appelée «planer» à la classe. Dans cette fonction, nous ajoutons une image à l'arrière-plan via URL et attribuons une propriété à la taille de l'arrière-plan appelé «couverture».
Après cela, nous fermons toutes les balises de style et nous nous dirigeons vers le corps de ce fichier. Dans la balise corporelle, nous ajoutons une rubrique à l'aide de la balise H1 et la balise de bouton est ouverte après la balise d'en-tête. Dans la balise de bouton, nous appelons la classe que nous avons créée dans la balise de style de l'en-tête du fichier. Et puis, fermez le bouton et la balise du corps. Après cela, nous ouvrons ce fichier dans notre navigateur pour obtenir la sortie suivante:
La sortie que nous voyons dans ce fichier est le résultat après que le bouton ait été plané sur. Lorsque nous survons sur le bouton, l'image que nous avons attribuée dans la balise de style de l'en-tête de fichier apparaît.
Exemple 04: Transformation de la balise de style CSS d'un bouton par défaut en une icône pour la fonction suivante et précédente
Dans cet exemple, nous transformerons les deux boutons par défaut du langage de balisage hypertexte en utilisant la balise de style CSS. Nous transformerons les deux boutons de cet exemple en icônes suivantes et précédentes en ajoutant une image dans la balise de style. Nous devons écrire le script suivant pour le faire:
Dans le script précédent, nous ajoutons une balise de style dans l'en-tête de fichier. Ensuite, nous créons deux classes pour les deux boutons de la balise de style. Dans ces classes, nous ajoutons une image aux deux boutons respectivement, en utilisant la propriété d'image d'arrière-plan et le format URL de l'image. Après avoir attribué les deux classes avec leurs propriétés, nous fermons le style et la balise de tête et ouvrir la balise corporelle pour créer le contenu de la page de notre navigateur. Tout d'abord, nous donnons à la frontière une rubrique à l'aide de la balise H1, qui est une taille de cap définie dans HTML. Ensuite, nous créons deux boutons. Dans ces deux boutons, nous attribuons la classe relative définie dans la balise de style. Après cela, nous fermons les onglets et ouvrons ce fichier sur notre navigateur après l'avoir enregistré.
La sortie précédente est le résultat de notre script. Comme nous pouvons le voir, les deux boutons sont alignés et les images des classes de style sont correctement insérées. Maintenant, les boutons par défaut sont transformés en icônes suivantes et précédentes pour une page Web en utilisant CSS.
Conclusion
Dans cet article, nous avons discuté de plusieurs exemples d'ajouter les images à un bouton utilisant CSS. Nous avons utilisé le CSS en ligne CSS et STYLE TAG CSS pour ajouter les images à un bouton par défaut dans un fichier HTML. Nous avons implémenté plusieurs effets sur un bouton pour ajouter une image comme l'effet de survol ou le style de couverture en utilisant le bloc-notes ++ pour modifier le fichier html. Nous avons utilisé les différentes propriétés du style CSS de l'élément bouton pour les transformer en un attribut attractif dans notre page Web.