HTML

In this HTML section, we create the foundational structure for our magical toggle. The button is encased within a container, designed to center our interactive element on the screen.

          <div class="magic-lamp-container">
            <button onclick="rubTheLamp()" class="toggle-lamp-button" aria-label="Magic Lamp Toggle">
              <span class="toggle-state">Unrubbed</span>
            </button>
          </div>
        

Javascript

Our JavaScript adds the interactive element that brings our magic lamp to life. We begin by initializing a boolean variable, genieReleased, to track the button's state, either "rubbed" or "unrubbed." The rubTheLamp function toggles this state and updates the button's background gradient and text.

          let genieReleased = false;
          function rubTheLamp() {
              let button = document.querySelector('.toggle-lamp-button');
              let stateText = document.querySelector('.toggle-state');

              genieReleased = !genieReleased;

              if (genieReleased) {
                  button.style.background = "radial-gradient(circle, rgba(255,215,0,0.9), rgba(255,140,0,0.9))";
                  stateText.textContent = "Rubbed";
                  button.classList.add('genie-active');
              } else {
                  button.style.background = "radial-gradient(circle, rgba(0,140,255,0.9), rgba(0,75,160,0.9))";
                  stateText.textContent = "Unrubbed";
                  button.classList.remove('genie-active');
              }
          }
        

CSS

In our CSS, we design the container using flexbox for easy centering, giving our interface a neat and focused appearance.

          .magic-lamp-container {
              display: flex;
              justify-content: center;
              align-items: center;
              height: 100vh;
          }
        

The .toggle-lamp-button styles ensure the button has a dreamy radial gradient with subtle hover effects, enhancing the magic experience when the user interacts with it.

          .toggle-lamp-button {
              border: none;
              padding: 20px 40px;
              border-radius: 30px;
              color: white;
              font-size: 20px;
              font-weight: bold;
              transition: background 0.5s, transform 0.3s;
              cursor: pointer;
              background: radial-gradient(circle, rgba(0,140,255,0.9), rgba(0,75,160,0.9));
              position: relative;
          }
        

The .genie-active class gives life to the button by scaling it up and adding a luminous glow, mimicking a magical eruption from within the lamp itself.

          .genie-active {
              transform: scale(1.2);
              box-shadow: 0 0 20px rgba(255,215,0,0.7), 0 0 25px rgba(255,140,0,0.7);
          }
        

For improved accessibility, we included a focus style to make keyboard navigation clear and engaging.

          .toggle-lamp-button:focus {
              outline: 3px solid rgba(255,215,0,0.5);
          }
        

Final Thoughts

With these steps, we've imagined a toggle button that not only serves a function but also enchants the user with visual charm, drawing them into an interactive UI experience that feels both classic and novel.