Le bouton est un élément cliquable utilisé pour effectuer une action spécifique. En utilisant CSS, vous pouvez définir différents styles de boutons, l'un d'eux consiste à changer la couleur d'un bouton au clic. La couleur d'un bouton peut être définie à l'aide du CSS ' :actif ” pseudo-classe.

Ce blog vous apprendra la procédure liée au changement de la couleur du bouton au clic. Pour cela, tout d'abord, renseignez-vous sur la pseudo-classe :active.

Alors, commençons !

Qu'est-ce que ':active' en CSS ?

Changer la couleur du bouton au clic dans CSS est possible à l'aide du ' :actif ” pseudo-classe. En HTML, il indique un élément qui s'active lorsque l'utilisateur clique dessus. De plus, lors de l'utilisation d'une souris, l'activation démarre lorsque la touche de la souris est enfoncée.

Syntaxe

' un ” fait référence à l'élément HTML sur lequel la classe :active sera appliquée.

Dirigeons-nous vers un exemple pour comprendre le concept énoncé.

Comment changer la couleur du bouton lors d'un clic en CSS ?

Pour changer la couleur d'un bouton au clic, créez d'abord un bouton dans un fichier HTML et attribuez-lui le nom de la classe ' btn ”.

HTML

Ensuite, en 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

Après cela, appliquez la pseudo-classe :active sur le bouton comme ' .btn : actif ' et définissez la couleur du bouton qui s'affichera dans son état actif comme ' RVB (123, 180, 17) ” :

Cela affichera le résultat suivant :

Maintenant, ajoutons le titre avec la balise

et le nom de la classe de boutons ' bouton ”, à l'intérieur de la balise .

HTML

< centre >

< h1 > Changer la couleur du bouton < / h1 >

< bouton classer = 'bouton' > Cliquez sur moi < / bouton >

< / centre >

Ensuite, nous allons passer au CSS et styliser le bouton et appliquer :active dessus. Pour ce faire, nous allons définir le style de bordure comme ' rien ' et donner un rembourrage comme ' 15px ”. Après cela, définissez la couleur du texte du bouton sur ' RVB(50, 0, 54) ' et son arrière-plan comme ' RVB (177, 110, 149) ', et son rayon comme ' 15px ” :

.bouton {

frontière : rien ;

rembourrage : 15px ;

Couleur : RVB ( cinquante , 0 , 54 ) ;

Couleur de l'arrière plan : RVB ( 177 , 110 , 149 ) ;

rayon de bordure : 15px ;

}

Cela affichera le résultat suivant :

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

.bouton : actif {

Couleur de l'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, on peut observer que lorsque le bouton est cliqué, sa couleur est modifiée en fonction du code de couleur RVB spécifié.

Conclusion

Pour changer la couleur du bouton au clic en CSS, le ' :actif ” la 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 pour changer la couleur du bouton lors d'un clic dans CSS.