CHANGER LA COULEUR D'UN BOUTON
CHANGER LA COULEUR D'UN BOUTON

Comment changer la couleur d'un bouton lors d'un clic en HTML CSS Javascript.

ESSAYEZ MOI !

Code JavaScript :
<script>
     const btn1 = document.querySelector('.button1');
	   const btn2 = document.querySelector('.button2');
	    const btn3 = document.querySelector('.button3'); 
btn1.addEventListener('click', () => {
    btn1.style.backgroundColor = '#ffac09';
	 btn2.style.backgroundColor = '#555555';
	  btn3.style.backgroundColor = '#555555';
});
btn2.addEventListener('click', () => {
    btn2.style.backgroundColor = '#ffac09';
  	 btn1.style.backgroundColor = '#555555';
	  btn3.style.backgroundColor = '#555555';
}
);
btn3.addEventListener('click', () => {
    btn3.style.backgroundColor = '#ffac09';
  	 btn1.style.backgroundColor = '#555555';
	  btn2.style.backgroundColor = '#555555';
}
);
   </script> 
Code CSS :
</style> 
 .button {
  background-color: #04AA6D; /* Vert */
  border: none;
  color: white;
  padding: 10px 22px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
 }

.button1 {background-color: #ffac09;} /* orange */
.button2 {background-color: #555555;} /* noir */
.button3 {background-color: #555555;} /* noir */
</style> 	
Code HTML :
><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Changer la couleur d'un bouton lors d'un clic - www.yakafaire.eu</title>
</style> .button { background-color: #04AA6D; /* Vert */ border: none; color: white; padding: 10px 22px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; } .button1 {background-color: #ffac09;} /* orange */ .button2 {background-color: #555555;} /* noir */ .button3 {background-color: #555555;} /* noir */ </style> </head>
<body>
<button class="button button1">Bouton 1 </button> <button class="button button2">Bouton 2 </button> <button class="button button3">Bouton 3 </button> <script> const btn1 = document.querySelector('.button1'); const btn2 = document.querySelector('.button2'); const btn3 = document.querySelector('.button3'); btn1.addEventListener('click', () => { btn1.style.backgroundColor = '#ffac09'; btn2.style.backgroundColor = '#555555'; btn3.style.backgroundColor = '#555555'; }); btn2.addEventListener('click', () => { btn2.style.backgroundColor = '#ffac09'; btn1.style.backgroundColor = '#555555'; btn3.style.backgroundColor = '#555555'; } ); btn3.addEventListener('click', () => { btn3.style.backgroundColor = '#ffac09'; btn1.style.backgroundColor = '#555555'; btn2.style.backgroundColor = '#555555'; } ); </script> </body>
</html>