Un bouton est une partie fondamentale de HTML qui effectue diverses tâches. En utilisant CSS, vous pouvez concevoir et styliser le bouton. Il existe différentes façons de concevoir le bouton, comme colorer le bouton, redimensionner, planer et bien d'autres.

Dans cet article, nous apprendrons d'abord à créer un bouton, puis à modifier la couleur d'un bouton en survolons.

Commençons!

Comment changer la couleur du bouton sur le plan de volant dans CSS?

Dans CSS, ":flotter"Est utilisé pour modifier la couleur du bouton en survolant. ":flotter"Est une pseudo-classe qui permet de modifier le comportement des éléments HTML lorsqu'il est une souris dessus, comme des éléments tels que des liens, des boutons, des images et bien d'autres.

La syntaxe de :flotter est fourni ci-dessous.

Syntaxe

Dans la syntaxe ci-dessus, «un»Fait référence à l'élément HTML où le«:flotter" est appliqué. Dans CSS, vous pouvez définir le comportement de survol des éléments HTML, tels que la couleur, la taille et la largeur de l'élément.

Étape 1: Créez une div et un bouton

Dans le HTML, nous allons d'abord créer une div et ajouter une rubrique avec

et un bouton utilisant une balise. Ici, nous attribuerons le nom de classe du bouton comme «btn"Et le texte du bouton comme"Planer sur moi".

Html

Le résultat du code susmentionné est donné ci-dessous. Vous pouvez voir que l'en-tête et le bouton sont créés:

Maintenant, passez au CSS pour styliser la div et le bouton un par un.

Étape 2: bouton de style et div

Tout d'abord, nous allons styliser le conteneur créé en utilisant «div". Ensuite, nous définirons la hauteur de la div comme «250px"Et la couleur d'arrière-plan comme"RVB (199, 173, 192)". Nous utiliserons également la propriété de la frontière pour ajuster la bordure de la div, la largeur comme «5px», Style comme«solide», Et la couleur comme«RVB (40, 2, 55)".

CSS

La sortie en dessous indique que le style ajouté est appliqué avec succès sur la div:

Dans l'étape suivante, nous allons styliser le bouton en utilisant CSS.

Maintenant, nous allons styliser le bouton en utilisant ".btn«Pour accéder au bouton créé en HTML. Après cela, nous masquerons la bordure du bouton en définissant "aucun»Comme valeur de la propriété frontalière. Après cela, nous allons ajuster la taille de la police à «grand»Et le rembourrage du bouton à«10px«Pour créer des espaces entre le contenu du bouton et la bordure du bouton. En fin de compte, nous définirons la couleur du texte et de l'arrière-plan comme «RVB (50, 0, 54)" et "RVB (193, 54, 135)»:

Le bouton est désormais conçu:

De plus, nous postulerons ":flotter”Pour changer la couleur d'un bouton sur planant.

Étape 3: Modifier la couleur du bouton sur planant

Maintenant, nous allons utiliser ".BTN: planant”Pour lier le bouton avec l'élément de pseudo-classe de survol. En conséquence, le survol sera appliqué sur le bouton. Ensuite, nous définirons la couleur d'arrière-plan et la couleur du texte du bouton comme «RVB (66, 2, 41)" et "RVB (119, 255, 0)". Ces couleurs seront appliquées sur le bouton lors d'une souris dessus:

Dans la sortie fournie ci-dessous, vous pouvez voir que la couleur du bouton est modifiée lorsqu'une souris plane dessus:

C'est ça! Nous avons expliqué la méthode pour modifier la couleur du bouton en survol en utilisant CSS.

Conclusion

Pour modifier la couleur d'un bouton sur planant, le «:flotter»L'élément de pseudo-classe est utilisé. Pour ce faire, liez le bouton avec: survolez et définissez la couleur du bouton, qui changera lorsque nous planerons dessus. Dans cet article, nous avons expliqué la méthode pour modifier la couleur du bouton sur vol.