HTML fournit différents éléments; L'un d'eux est le «bouton», Qui est utilisé pour effectuer une action spécifique dans la page Web. En utilisant CSS, vous pouvez styliser le bouton de différentes manières, comme la taille, la couleur, la forme, la forme du bouton et bien d'autres. Pour ce faire, différentes propriétés CSS peuvent être utilisées pour styliser le bouton en fonction des exigences.

Ce manuel vous apprendra la procédure de modification de la couleur du bouton. Commençons!

Comment changer la couleur du bouton dans CSS?

Vous pouvez modifier la couleur du bouton à l'aide du "Couleur de l'arrière plan«Propriété et définissez la couleur du bouton en fonction de vos préférences. Fondamentalement, le «Couleur de l'arrière plan»La propriété est utilisée pour ajouter la couleur d'arrière-plan des éléments HTML.

Syntaxe

La syntaxe de la propriété de couleur arrière-plan est la suivante:

Color d'arrière-plan: valeur

À la place de la valeur en arrière-plan, vous pouvez définir la couleur que vous souhaitez afficher derrière les éléments HTML.

Maintenant, passons à l'exemple pratique, dans lequel nous allons changer la couleur du bouton.

Exemple

Tout d'abord, apprenez à créer un bouton dans Div, puis changez sa couleur à l'aide de CSS.

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

Dans HTML, nous créerons un div et attribuerons le nom de classe comme «div". À l'intérieur de la balise, nous ajouterons une rubrique en utilisant le

Tag et un bouton utilisant la balise avec le nom de classe comme "btn". Le texte qui s'affiche sur le bouton est «Couleur".

Html

Changer la couleur du bouton dans CSS

Couleur

On peut voir que le div et un bouton sont créés:

Maintenant, nous passerons à l'étape suivante pour styliser la div créée en utilisant CSS.

Étape 2: Style Div

Ici, utilisez ".div«Pour accéder au conteneur créé et régler sa hauteur comme«200px". Ensuite, style le div en utilisant le «frontière”Propriété pour placer la frontière autour du div. La largeur de la frontière est définie comme «4px», Son style comme«rainure», Et la couleur comme«RVB (1, 34, 77)". Nous allons définir la forme de la bordure avec le «rayon frontalier«Propriété et définit sa valeur comme«25px". Après cela, utilisez le «Couleur de l'arrière plan”Propriété pour définir la couleur d'arrière-plan de la div et attribuer la valeur de la couleur comme«RVB (210, 243, 241)".

CSS

.div
hauteur: 200px;
Border: 4px Groove RGB (1, 34, 77);
Border-Radius: 25px;
Color en arrière-plan: RVB (210, 243, 241);

En conséquence, le conteneur créé est stylé:

Passons à la dernière étape, dans laquelle nous colorisons le bouton en utilisant CSS.

Étape 3: Modifier la couleur du bouton

Après avoir stylé la div dans CSS, nous utiliserons ".btn«Pour accéder au bouton créé en HTML. Ensuite, définissez la valeur de la propriété frontalière comme «aucun«Pour supprimer le style de bordure par défaut. Spécifiez la valeur de la propriété Border-Radius comme «15px"Pour régler la forme du bouton

Style le texte du bouton à l'aide de la propriété de taille de police et définissez sa valeur comme «xx grand". Après cela, nous utiliserons le rembourrage comme «10px«Pour créer de l'espace entre le texte ajouté et la bordure du bouton.

En fin de compte, utilisez la propriété couleur et définissez sa valeur comme «RVB (255, 251, 7)"Pour colorer le texte et la propriété en couleur en arrière-plan comme"RVB (43, 87, 84)«Pour définir la couleur du bouton:

.btn
Border: aucun;
Border-Radius: 15px;
taille de police: xx-grand;
rembourrage: 10px;
Couleur: RVB (255, 251, 7);
Color d'arrière-plan: RVB (43, 87, 84);

La sortie donnée indiquait que la couleur du bouton est modifiée avec succès:

Nous avons expliqué la méthode pour modifier la couleur du bouton dans CSS.

Conclusion

Dans CSS, le «Couleur de l'arrière plan»La propriété est utilisée pour définir la couleur du bouton. En utilisant cela, vous pouvez définir la couleur en fonction de votre choix et concevoir élégamment un bouton. Vous pouvez également utiliser différentes propriétés pour améliorer l'apparence du bouton à l'aide de CSS. Dans ce guide, nous avons expliqué la méthode pour modifier la couleur du bouton dans CSS et fourni un exemple pour votre meilleure compréhension.