Bordure du bouton CSS

Dans cet article, nous discuterons de la façon de styliser un bouton avec CSS en lui donnant une bordure. Le bouton par défaut que nous obtenons généralement dans un fichier HTML est une boîte blanche sans limite. Un texte dedans et n'est pas très attrayant. Nous utilisons le style CSS sur le bouton pour le rendre plus agréable et pour le mélanger avec le reste de la page. Nous nous concentrerons sur la frontière d'un bouton dans le style CSS dans cet article et implémenterons plusieurs exemples.

Exemple 01: Utilisation de CSS pour donner à un bouton une bordure solide dans un fichier HTML

Dans cet exemple, nous utiliserons une balise de style CSS pour modifier un bouton dans un fichier html. Nous ajouterons une bordure solide au bouton par défaut qui n'a pas de limite pour la mettre en surbrillance à partir de l'arrière-plan et le reste de la page.

Nous avons ouvert la balise de style et commencé un paramètre de bouton pour le style. En cela, nous avons donné au bouton une couleur d'arrière-plan en utilisant le code de référence HTML. Ensuite, nous avons donné une bordure au bouton en l'écrivant comme mot clé et lui avons donné trois propriétés: la taille de la bordure du bouton, l'état de la bordure, puis la couleur de la bordure. Ensuite, dans le style, nous avons donné au bouton un rembourrage, un alignement de texte et des propriétés d'affichage pour rendre le bouton réglable au navigateur et plus visible.

Ensuite, nous avons fermé le style et la tête de la tête et nous sommes déplacés vers l'étiquette corporelle. Dans cette balise, nous avons donné à notre page HTML un titre à l'aide de la balise H1, puis a ouvert la balise de bouton. Après cela, nous fermerons les deux balises et enregistrerons ce script dans le ".Format html ”pour l'ouvrir sur notre navigateur.

Après avoir exécuté le script sur notre navigateur, nous obtiendrons la sortie ci-dessus. La sortie ci-dessus montre que le bouton a le style comme nous l'avons spécifié dans la balise de style dans l'en-tête du fichier.

Exemple 02: Utilisation de CSS pour donner une bordure pointillée à un bouton dans un fichier HTML

Dans cet exemple, nous ajouterons une bordure pointillée au bouton par défaut, qui n'a pas de bordure, pour la distinguer de la toile de fond et du reste de la page. Le script sera développé dans Notepad ++ et utilisera une balise de style CSS pour modifier un bouton dans un fichier HTML.

Nous avons ouvert la balise de style et commencé à personnaliser le paramètre du bouton. Nous avons utilisé le code de référence HTML pour donner la couleur du fond du bouton. Ensuite, nous avons donné une bordure au bouton en l'écrivant comme mot clé et en lui donnant trois propriétés: «4px», qui est la taille de la bordure; «Pointillé», qui est la forme de la frontière; et «noir», qui est la couleur de la bordure.

Ensuite, nous avons ajouté le rembourrage, l'alignement du texte, les paramètres d'affichage et la taille de la police au bouton pour le rendre plus ajusté au navigateur et perceptible. Les étiquettes de style et de tête ont ensuite été fermées. Ensuite, c'est l'étiquette corporelle. Nous avons utilisé la balise H1 pour fournir à notre page HTML un titre, puis nous avons ouvert la balise de bouton dans la balise corporelle. Nous avons écrit un texte qui apparaîtra sur le bouton de cette balise. Après cela, nous fermerons les deux balises et enregistrerons ce script dans ".Format html ”afin que nous puissions l'exécuter sur notre navigateur.

Nous obtiendrons la sortie ci-dessus après avoir exécuté le script dans notre navigateur. L'extrait de l'extrait montre que le bouton a une bordure pointillée noire telle que définie dans la balise de style dans l'en-tête du fichier.

Exemple 03: Utilisation de CSS pour donner à un bouton une bordure solide à bords ronds dans un fichier HTML

Dans cet exemple, nous utiliserons les balises de style CSS pour modifier l'apparence d'un bouton dans un fichier HTML. Nous allons créer une bordure solide avec des coins ronds et une certaine couleur pour distinguer le bouton par défaut du premier plan et le reste de la page.

Nous avons ouvert la balise de style dans le script ci-dessus et avons commencé à modifier un paramètre de bouton dans l'en-tête du fichier HTML. Ensuite, nous avons donné une bordure au bouton en l'écrivant comme mot clé et en lui attribuant trois propriétés: «4px», qui est la taille de la bordure; «Solide», qui est la forme de la frontière; et «noir», qui est la couleur de la frontière. Ensuite, nous avons ajouté une autre propriété frontalière appelée Border-Radius et sa valeur est attribuée en pixels pour contourner les bords de la bordure. Nous avons ensuite fermé le style et les étiquettes de tête avant de passer à l'étiquette corporelle. Nous avons écrit du texte entre les balises de bouton qui apparaîtront sur le bouton.

Comme le montre la sortie ci-dessus, le bord du bouton a des bords arrondis et tous les autres styles que nous avons définis dans l'en-tête du fichier.

Exemple 04: Utilisation de CSS en ligne pour ajouter une bordure à un bouton dans un fichier HTML

Dans cet exemple, nous utiliserons le style CSS en ligne sur un bouton pour lui donner une bordure dans un fichier HTML. Tout le style qui sera effectué sur le bouton serait donné à l'intérieur de la balise du bouton.

Dans le script ci-dessus, nous ferons tout le style dans le corps du fichier. Tout d'abord, nous ouvrirons la balise H1 pour donner une tête à la page. Ensuite, nous ouvrirons la balise du bouton. Dans cette balise, nous définirons le style du bouton. Nous initierons le style avec le mot clé de la bordure et commencerons à lui donner différentes propriétés telles que la taille, la forme, la couleur, le rembourrage et l'alignement. Après cela, nous avons fermé la balise et écrit le texte qui apparaîtra sur le bouton. Ensuite, nous avons fermé toutes les balises et exécuté ce fichier pour obtenir la sortie ci-dessous:

Comme nous pouvons le voir dans la sortie, le bouton a tout le style que nous avons fourni dans la balise de bouton et nous avons réussi à ajouter une bordure à un bouton en utilisant CSS en ligne.

Exemple 05: Utilisation de CSS pour donner une double bordure à un bouton dans un fichier HTML

Nous ajouterons une double bordure à un bouton dans cet exemple. Le script sera développé dans Notepad ++ et utilisera une méthode de balise de style CSS pour modifier un bouton dans un fichier html.

Nous avons ouvert la balise de style et avons commencé à modifier un élément de bouton dans l'en-tête du fichier HTML. La bordure a ensuite été ajoutée au bouton en l'écrivant comme mot clé et en lui attribuant trois propriétés: «10px», la taille de la bordure; «Double», la forme de la frontière; et «noir», la couleur de la frontière.

Le bouton a tous les styles de la balise de style et nous avons réussi à appliquer une bordure à un bouton en utilisant CSS.

Conclusion

Dans cet article, nous avons discuté de la bordure d'un bouton utilisant CSS dans un fichier HTML. Le bouton par défaut d'un navigateur n'a généralement pas de style et n'est qu'un simple carré blanc. Nous utilisons donc CSS pour styliser cet élément et le rendre adaptable à la page HTML. Dans cet article, nous avons discuté de différents exemples dans lesquels nous avons ajouté une bordure à un bouton en utilisant différentes approches, et tous ces exemples ont été mis en œuvre dans le bloc-notes++.