The HTML part is simple but crucial. We create a container to hold our button. The button houses a span to display toggle states, initially set to 'Desert Island'.

        <div class="floating-island-container">
          <button onclick="toggleIsland()" class="toggle-island-button" aria-label="Toggle Floating Island">
            <span class="toggle-state">Desert Island</span>
          </button>
        </div>
      

Use of aria-label ensures screen readers can describe the button function, enhancing accessibility.

Our JavaScript controls the state of the button. It toggles between 'Desert Island' and 'Tropical Paradise', updating the gradients and labels.

        let isActive = false;
        function toggleIsland() {
            let button = document.querySelector('.toggle-island-button');
            let stateText = document.querySelector('.toggle-state');

            isActive = !isActive;

            if (isActive) {
                button.style.background = "linear-gradient(180deg, rgba(34,139,34,0.9), rgba(138,43,226,0.9))";
                stateText.textContent = "Tropical Paradise";
                button.classList.add('island-active');
            } else {
                button.style.background = "linear-gradient(180deg, rgba(255,223,186,0.9), rgba(240,128,128,0.9))";
                stateText.textContent = "Desert Island";
                button.classList.remove('island-active');
            }
        }
      

Toggle functionality helps in seamless transitions between button states using boolean flipping.

The CSS styles dictate the visual magic. We use gradient backgrounds and scale transforms to depict island states.

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

        .toggle-island-button {
            border: none;
            padding: 20px 40px;
            border-radius: 50px;
            color: white;
            font-size: 18px;
            font-weight: bold;
            transition: background 0.5s, transform 0.4s;
            cursor: pointer;
            background: linear-gradient(180deg, rgba(255,223,186,0.9), rgba(240,128,128,0.9));
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .island-active {
            transform: translateY(-10px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.2);
            animation: floating 3s ease-in-out infinite alternate;
        }

        @keyframes floating {
            0% { transform: translateY(-10px); }
            100% { transform: translateY(-20px); }
        }
      

The .floating-island-container centers the button, while .toggle-island-button transitions and .island-active animations create the magical floating effect.