How to Change Button Color on Click in Javascript

In this tutorial, you will learn how to change button color on click in javascript. By default, the color of a button is always white with black text, but we can change that color using CSS or javascript.

In CSS, we have a backgroundColor property to change the background color of an element. In javascript, we can take advantage of same property to achieve our goal and change the color of a button on click.  Each element has style property and this property contains all style-related properties such as color, backgroundColor, borderColor, etc.

In the following example, we have three buttons and we want to change their background color when they are clicked.  Please have a look over the code example and steps given below.

HTML & CSS

  • We have 4 elements in the HTML file (1 div and 3 button). The div element is just a wrapper for the rest of the elements.
  • The 3 button elements have “Primary”, “Danger”, and “Success” as their inner text.
  • We have done some basic styling using CSS and added the link to our style.css stylesheet inside the head element.
  • We have also included our javascript file script.js with a script tag at the bottom.
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>
<body>
  
  <div>
    <button id="primary">Primary</button>
    <button id="danger">Danger</button>
    <button id="success">Success</button>
  </div>

  <script src="script.js"></script>
</body>
</html>
div {
    display: flex;
    justify-content: center;
}

button {
    padding: 10px 20px;
    margin: 5px;
    background-color: black;
    color: #fff;
    border: none;    
    outline: none;
    border-radius: 5px;
}

Javascript

  • We have selected all 3 button elements using the document.querySelector() method and stored them in btnPrimary, btnDanger, and btnGreen variables.
  • We have attached a click event listener to all the button elements.
  • The button element has style property. This property points to an object which contains all style-related properties. The backgroundColor property is one of them. We will use this property to change the color of the button element
  • Upon click of the primary button, we will change the color of the button to “#337ab7”, which is a light blue color.
  • Upon click of the danger button, we will change the color of the button to “#c9302c”, which is a maroon color.
  • Upon click of the success button, we will change the color of the button to “#4cae4c”, which is a green color.
let btnPrimary = document.querySelector('#primary');
let btnDanger = document.querySelector('#danger');
let btnSuccess = document.querySelector('#success');

btnPrimary.addEventListener('click', () => btnPrimary.style.backgroundColor = '#337ab7')
btnDanger.addEventListener('click', () => btnDanger.style.backgroundColor = '#c9302c')
btnSuccess.addEventListener('click', () => btnSuccess.style.backgroundColor = '#4cae4c')
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •