How to Create a CSS Toggle Button With an Icon

Posted 2025-02-15 10:58:27

446

Creating a CSS toggle button with an icon is simple and effective for various interactive web features. Below is an example of a toggle button that changes its icon when toggled.

Example: Toggle Button with CSS and Icons

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Icon Toggle Button</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background-color: #f4f4f4;
    }

    .toggle-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 60px;
      height: 60px;
      border: none;
      border-radius: 50%;
      background-color: #007BFF;
      color: white;
      font-size: 24px;
      cursor: pointer;
      transition: background-color 0.3s, transform 0.2s;
    }

    .toggle-btn:active {
      transform: scale(0.95);
    }

    .toggle-btn.toggled {
      background-color: #28A745;
    }
  </style>
</head>
<body>
  <button id="toggleButton" class="toggle-btn">
    <span id="icon">☀️</span>
  </button>

  <script>
    const toggleButton = document.getElementById('toggleButton');
    const icon = document.getElementById('icon');

    toggleButton.addEventListener('click', () => {
      toggleButton.classList.toggle('toggled');
      icon.textContent = toggleButton.classList.contains('toggled') ? '🌙' : '☀️';
    });
  </script>
</body>
</html>

How it works:

CSS Styling: The .toggle-btn class styles the button. The toggled class applies a different background color for the active state.
Icons: Unicode icons (☀️ for sun and 🌙 for moon) change when the button is toggled.
JavaScript: Adds an event listener to toggle the toggled class and swap the icon when clicked.

Please log in to like, share and comment!