par

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

1 Réponse

+1 validé
par

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>

Lecture Recommandée

Edward Snowden - Mémoires vives

"Je m'appelle Edward Joseph Snowden. Avant, je travaillais pour le gouvernement mais aujourd'hui je suis au service de tous. Il m'a fallu près de trente ans pour saisir la différence et quand j'ai compris, ça m'a valu quelques ennuis au bureau."

L'homme qui a tout risqué pour dénoncer la surveillance globale, ou l'extraordinaire histoire d'un garçon brillant qui a grandi "en ligne", d'un homme devenu espion, puis lanceur d'alerte, et, en exil, la consciencce de l'internet.

Mémoires vives est un témoignage exceptionnel, également disponible en numérique.

Sujets Connexes

Offre Sponsorisée

Ailleurs sur le Web

Merci pour votre visite sur 1FORMATIK.com

Un petit clic sur la pub est toujours apprécié, c'est elle qui finance le site

Bon surf

...