Vue Js Change Button Color and Icon on click

<html lang="en">
<head>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
</head>
<body>
  <div id="app">
    <h3>Vue Js Cange Button Color and Icon on click</h3>
    <button :class="{ 'active': isActive }" @click="isActive = !isActive">
      <i :class="isActive ? 'fa fa-check' : 'fa fa-times'"></i>
    </button>
  </div>

/* Styles for the active state of the button */
    button.active {
      background-color: #00aaff;
      color: #fff;
    }

/* Styles for the button icon */
    i {
      display: inline-block;
      width: 16px;
      height: 16px;

/* Add additional styling for the icon as needed */
    }
  </style>

</body>

</html>

 
<html lang="en">
<head>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
</head>
<body>
  <div id="app">
    <h3>Vue Js Cange Button Color and Icon on click</h3>
    <button :class="{ 'active': isActive }" @click="isActive = !isActive">
      <i :class="isActive ? 'fa fa-check' : 'fa fa-times'"></i>
    </button>
  </div>
​
  <script type="module">
    const app = new Vue({
      el: "#app",
      data() {
        return {
          isActive: false
        };
      },
    });
  </script>
  <style scoped>
    /* Styles for the button */
    button {
      padding: 10px 20px;
      background-color: #ccc;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
​
    /* Styles for the active state of the button */
    button.active {
      background-color: #00aaff;
      color: #fff;
    }
​
    /* Styles for the button icon */
    i {
      display: inline-block;
      width: 16px;
      height: 16px;
​
      /* Add additional styling for the icon as needed */
    }
  </style>
​
</body>
​
</html>