Back

A Magical Toggle Button: Unveiling the Mystical Portal

Explore the depths of enchanting interactions with a toggle button that opens and closes an animated portal.

HTML

In our HTML structure, we have a container holding a toggle button and a display area for showing portal content. The toggle button is adorned with a span for text and a div for a light animation effect.


        <div class="portal-container">
          <button class="portal-toggle" onclick="togglePortal()">
            <span class="portal-text">Open Portal</span>
            <div class="portal-light"></div>
          </button>
          <div class="portal-display">
            <p>Welcome to the mystical realm!</p>
          </div>
        </div>

JavaScript

Our JavaScript provides the interactivity for toggling the portal open and closed. We use a boolean variable to track the state, and toggle functionality to manipulate DOM elements. When toggled, the scale and opacity of our portal display are animated to give the effect of it appearing or disappearing. The button text also changes to indicate the current action.


        let portalOpen = false;
        function togglePortal() {
          const button = document.querySelector('.portal-toggle');
          const portalDisplay = document.querySelector('.portal-display');
          const portalText = document.querySelector('.portal-text');
          portalOpen = !portalOpen;
          if (portalOpen) {
            portalDisplay.style.transform = 'scale(1)';
            portalDisplay.style.opacity = '1';
            portalText.textContent = 'Close Portal';
          } else {
            portalDisplay.style.transform = 'scale(0)';
            portalDisplay.style.opacity = '0';
            portalText.textContent = 'Open Portal';
          }
        }

CSS

For our CSS styles, we harness claymorphism to create a playful and whimsical aesthetic. The button features a radial gradient for an ethereal glow and smooth transitions to enchant users while they hover. The portal display features box shadows to emulate depth and an inward glowing effect, enhancing the mystical theme.


        .portal-container {
          display: flex;
          flex-direction: column;
          align-items: center;
        }
        .portal-toggle {
          background-color: #673ab7;
          color: white;
          border: none;
          padding: 15px;
          border-radius: 50px;
          font-size: 18px;
          cursor: pointer;
          position: relative;
          transition: background-color 0.3s;
        }
        .portal-toggle:hover {
          background-color: #5e35b1;
        }
        .portal-light {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          border-radius: 50px;
          background: radial-gradient(circle, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 70%);
          opacity: 0;
          transition: opacity 0.5s;
        }
        .portal-toggle:hover .portal-light {
          opacity: 1;
        }
        .portal-display {
          background-color: #ede7f6;
          border: 2px solid #673ab7;
          border-radius: 15px;
          padding: 20px;
          margin-top: 20px;
          text-align: center;
          transform: scale(0);
          opacity: 0;
          transition: transform 0.6s, opacity 0.6s;
          box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2), 0 0 10px rgba(0, 0, 0, 0.2);
        }

This magical component combines form and fun, creating a delightful interaction for users as they enter and exit the mystical portal.

Whole code

<div class="portal-container">
  <button class="portal-toggle" onclick="togglePortal()">
    <span class="portal-text">Open Portal</span>
    <div class="portal-light"></div>
  </button>
  <div class="portal-display">
    <p>Welcome to the mystical realm!</p>
  </div>
</div>


<script>
let portalOpen = false;
function togglePortal() {
  const button = document.querySelector('.portal-toggle');
  const portalDisplay = document.querySelector('.portal-display');
  const portalText = document.querySelector('.portal-text');
  portalOpen = !portalOpen;
  if (portalOpen) {
    portalDisplay.style.transform = 'scale(1)';
    portalDisplay.style.opacity = '1';
    portalText.textContent = 'Close Portal';
  } else {
    portalDisplay.style.transform = 'scale(0)';
    portalDisplay.style.opacity = '0';
    portalText.textContent = 'Open Portal';
  }
}
</script>

<style>
.portal-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.portal-toggle {
  background-color: #673ab7;
  color: white;
  border: none;
  padding: 15px;
  border-radius: 50px;
  font-size: 18px;
  cursor: pointer;
  position: relative;
  transition: background-color 0.3s;
}
.portal-toggle:hover {
  background-color: #5e35b1;
}
.portal-light {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50px;
  background: radial-gradient(circle, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 70%);
  opacity: 0;
  transition: opacity 0.5s;
}
.portal-toggle:hover .portal-light {
  opacity: 1;
}
.portal-display {
  background-color: #ede7f6;
  border: 2px solid #673ab7;
  border-radius: 15px;
  padding: 20px;
  margin-top: 20px;
  text-align: center;
  transform: scale(0);
  opacity: 0;
  transition: transform 0.6s, opacity 0.6s;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2), 0 0 10px rgba(0, 0, 0, 0.2);
}

</style>

Thank you for reading this article.

A Magical Toggle Button: Unveiling the Mystical Portal

HTML

JavaScript

CSS

Whole code

Comments

More toggle-buttons

Similar

See also