Unlocking the Power of a Magnetic Nano Toggle Switch

Introduction

HTML Structure

        <div class="magnetic-nano-container">
          <button aria-label="Magnetic toggle switch" onclick="toggleNano()" class="magnetic-toggle-button">
            <span class="toggle-label">OFF</span>
          </button>
        </div>
      

CSS Styling

        .magnetic-nano-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .magnetic-toggle-button {
            border: 2px solid #ccc;
            padding: 20px;
            border-radius: 25px;
            color: white;
            font-size: 20px;
            font-weight: bold;
            cursor: pointer;
            background: rgba(192, 192, 192, 0.7);
            transition: background 0.3s, box-shadow 0.3s;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
        .magnetized {
            box-shadow: 0 0 15px rgba(32, 64, 96, 0.8), inset 0 0 10px rgba(32, 64, 96, 0.7);
        }
      

JavaScript Logic

        let isToggled = false;
        function toggleNano() {
            const button = document.querySelector('.magnetic-toggle-button');
            const label = document.querySelector('.toggle-label');
            isToggled = !isToggled;
            if (isToggled) {
                button.style.background = "rgba(32, 64, 96, 0.7)";
                button.classList.add('magnetized');
                label.textContent = "ON";
            } else {
                button.style.background = "rgba(192, 192, 192, 0.7)";
                button.classList.remove('magnetized');
                label.textContent = "OFF";
            }
        }
      

SEO and Accessibility Considerations

Modern Visual Trends Integration

Whole code

<div class="magnetic-nano-container">
  <button aria-label="Magnetic toggle switch" onclick="toggleNano()" class="magnetic-toggle-button">
    <span class="toggle-label">OFF</span>
  </button>
</div>


<script>
let isToggled = false;
function toggleNano() {
  const button = document.querySelector('.magnetic-toggle-button');
  const label = document.querySelector('.toggle-label');
  isToggled = !isToggled;
  if (isToggled) {
    button.style.background = "rgba(32, 64, 96, 0.7)";
    button.classList.add('magnetized');
    label.textContent = "ON";
  } else {
    button.style.background = "rgba(192, 192, 192, 0.7)";
    button.classList.remove('magnetized');
    label.textContent = "OFF";
  }
}
</script>

<style>
.magnetic-nano-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.magnetic-toggle-button {
  border: 2px solid #ccc;
  padding: 20px;
  border-radius: 25px;
  color: white;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  background: rgba(192, 192, 192, 0.7);
  transition: background 0.3s, box-shadow 0.3s;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.magnetized {
  box-shadow: 0 0 15px rgba(32, 64, 96, 0.8), inset 0 0 10px rgba(32, 64, 96, 0.7);
}

</style>