How to make a button change color when clicked in CSS

Arif Billah Babu

          

  CSS



Image not found!!

You can use the :active pseudo-class in CSS to change the color of a button when it is clicked. Here's an example:

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Change Color on Click</title>
  <style>
    /* Default button styles */
    .myButton {
      padding: 10px 20px;
      background-color: #4CAF50; /* Default color */
      color: white;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      cursor: pointer;
      border: none;
      border-radius: 5px;
    }

    /* Change color on click */
    .myButton:active {
      background-color: #45a049; /* New color on click */
    }
  </style>
</head>
<body>

  <button class="myButton">Click me</button>

</body>
</html>

In this example, the .myButton class defines the default styles for the button, and the .myButton:active selector specifies the styles that should be applied when the button is actively being clicked.

Feel free to adjust the colors and styles to match your design preferences.

Category List