31-colored-checkboxes/index.html

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="style.css">
   <title>Colored Checkbox UI</title>
</head>
<body>
   <h2>How are you today?</h2>
   <div class="toggle-container">
      <input type="checkbox" id="good" class="toggle good">
      <label for="good" class="label">
         <div class="ball"></div>
      </label>
      <span>Good</span>
   </div>
   <div class="toggle-container">
      <input type="checkbox" id="great" class="toggle great">
      <label for="great" class="label">
         <div class="ball"></div>
      </label>
      <span>Great</span>
   </div>
   <div class="toggle-container">
      <input type="checkbox" id="amazing" class="toggle amazing">
      <label for="amazing" class="label">
         <div class="ball"></div>
      </label>
      <span>Amazing</span>
   </div>

   <script src="script.js"></script>
</body>
</html>