Le bouton est un élément cliquable utilisé pour effectuer une action spécifique. À l'aide de CSS, vous pouvez définir différents styles de boutons L'un d'eux est de modifier la couleur d'un bouton en clic. La couleur d'un bouton peut être définie en utilisant le CSS ":actif”Pseudo-classe.

Ce blog vous apprendra la procédure liée à la modification de la couleur du bouton en clic. Pour cela, tout d'abord, découvrez le: pseudo-classe active.

Alors, commençons!

Qu'est-ce que «: actif» dans CSS?

Le changement de couleur du bouton sur le clic dans CSS est possible à l'aide du «:actif”Pseudo-classe. Dans HTML, il indique un élément qui est activé lorsque l'utilisateur clique dessus. De plus, lorsque vous utilisez une souris, l'activation démarre lorsque la touche de souris est enfoncée.

Syntaxe

a: actif
la couleur verte;

"un»Fait référence à l'élément HTML sur lequel la classe active sera appliquée.

Passons à un exemple pour comprendre le concept déclaré.

Comment modifier la couleur du bouton en clic dans CSS?

Pour modifier la couleur d'un bouton en cliquant, créez d'abord un bouton dans un fichier html et attribuez le nom de classe "btn".

Html

Bouton

Ensuite, dans CSS, définissez la couleur du bouton. Pour ce faire, nous utiliserons «.btn«Pour accéder au bouton et définir la couleur du bouton comme«RVB (0, 255, 213)".

CSS

.btn
Color en arrière-plan: RVB (0, 255, 213);

Après cela, appliquez: pseudo-classe active sur le bouton comme «.BTN: actif»Et définissez la couleur du bouton qui montrera dans son état actif comme«RVB (123, 180, 17)»:

.btn: actif
Color en arrière-plan: RVB (123, 180, 17);

Cela montrera le résultat suivant:

Maintenant, ajoutons la rubrique avec

Nom de la classe TAG et bouton "bouton», À l'intérieur de la balise.

Html

Modifier la couleur du bouton

Cliquez sur moi

Ensuite, nous allons passer à CSS et styliser le bouton et nous appliquer: actif dessus. Pour ce faire, nous allons définir le style de bordure comme «aucun"Et donnez un rembourrage comme"15px". Après cela, définissez la couleur du texte du bouton comme «RVB (50, 0, 54)"Et son expérience comme"RVB (177, 110, 149)», Et son rayon comme«15px»:

.bouton
Border: aucun;
rembourrage: 15px;
Couleur: RVB (50, 0, 54);
Color en arrière-plan: RVB (177, 110, 149);
Border-Radius: 15px;

Cela montrera le résultat suivant:

Après cela, nous appliquerons: une pseudo-classe active sur le bouton comme «.bouton: actif»Et définissez la couleur d'un bouton comme«RVB (200, 255, 0)»:

.bouton: actif
Color en arrière-plan: RVB (200, 255, 0);

Une fois que vous avez implémenté tout le code ci-dessus, accédez au fichier HTML et exécutez-le pour vérifier le résultat:

À partir de la sortie, il peut être observé lorsque le bouton est cliqué sur sa couleur en fonction du code de couleur RVB spécifié.

Conclusion

Pour modifier la couleur du bouton en clic dans CSS, le ":actif»Pseudo-classe peut être utilisée. Plus précisément, il peut représenter l'élément bouton lorsqu'il est activé. En utilisant cette classe, vous pouvez définir différentes couleurs de bouton lorsque la souris clique dessus. Cet article a expliqué la procédure de modification de la couleur des boutones sur Clic dans CSS.