Comment changer la couleur d'un bouton en HTML et CSS ?

Réponses rédigées par Antoine

Dernière mise à jour : 2020-04-10 16:58:09

Question

Comment puis-je changer la couleur d'un bouton en HTML et CSS ?

Réponse

Vous avez principalement trois moyens de créer un bouton en HTML :

Avec la balise <button>, elle est utilisée généralement avec un formulaire traité en JavaScript et Ajax. :

<button class="bouton">Valider</button>

Avec la balise <input>, elle est principalement utilisée avec un formulaire <form> et PHP :

<input type="button" class="bouton" value="Valider">

Via un lien <a href=""> pour créer un lien hypertexte sous la forme d'un bouton :

<a href="#" class="bouton">Valider</a>

Quelque soit la solution utilisée, vous remarquerez la CLASS nommée bouton, elle permet d'appliquer une apparence au bouton, et donc , entre autre, de changer la couleur du bouton.

Pour modifier l’apparence et la couleur du bouton HTML, il suffit de créer un peu de code CSS et de l'affilier à la CLASS bouton :

<style>
.bouton {
  background-color: #008000;
  border: none;
  color: white;
  padding: 10px;
  margin: 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 15px;
  cursor: pointer;
}
</style>

background-color : couleur de fond du bouton.
border : bordure du bouton.
color : couleur du texte.
padding et margin : marges internes et externes.
text-align : alignement du texte.
text-decoration : texte souligné ou non.
display : définit le type d affichage.
font-size : taille du texte.
cursor : type de curseur;

Si vous désirez changer la couleur du bouton lorsque l'internaute passe sa souris sur le bouton, ajoutez le code CSS suivant :

<style>
.bouton:hover {
  background-color: #225222;
  color: white;
}
</style>

Voici un exemple complet pour changer la couleur d'un bouton HTML avec CSS :

<!DOCTYPE html> 
<html> 
<head>
<meta charset="UTF-8">
<title>Comment changer couleur d'un bouton en HTML et CSS ?</title>
<style>
.bouton {
  background-color: #008000;
  border: none;
  color: white;
  margin: 10px;
  padding: 10px;
  text-decoration: none;
  text-align: center;
  display: inline-block;
  font-size: 15px;
  cursor: pointer;
}
.bouton:hover {
  background-color: #225222;
  color: white;
}
</style>
</head>
<body>
<button class="bouton">Bouton avec la balise button</button>
<input type="button" class="bouton" value="Bouton avec la balise input">
<a href="#" class="bouton">Bouton avec la balise a</a>
</body>
</html>