Back

Incorporating Elemental Magic in Toggle Buttons

Discover the enchantment of a toggle button that interacts with shadow play, taking user interfaces to a mystical level.

Introduction

Welcome to an initiative on unearthing magic within the mundane with a toggle button that plays with shadows and mystical designs. This tutorial walks you through creating a toggle button that not only switches states but also provides environmental feedback through shadows.

HTML

To start, define the HTML structure with a wrapper div to contain the toggle button. Inside it, a button element holds a span for text display.

        <div class="shadow-toggle-container">
          <button class="shadow-toggle-button" onclick="toggleShadow()">
            <span class="button-text">🌕</span>
          </button>
        </div>

JavaScript

This script toggles the shadow effect and icon, reflecting the button state. Add an event listener to the button, modify the icon between sun and moon symbols, and toggle shadow depth for dynamic feedback.

        function toggleShadow() {
          const button = document.querySelector('.shadow-toggle-button');
          const text = document.querySelector('.button-text');
          button.classList.toggle('active-shadow');
          if (button.classList.contains('active-shadow')) {
            text.innerText = '🌑';
          } else {
            text.innerText = '🌕';
          }
        }

CSS

Utilize modern UI elements such as glassmorphism here. Define styles for basic states and transitions. CSS handles box shadows and scale transformations, making it interactive when toggling.

        .shadow-toggle-container {
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 40px;
        }
        .shadow-toggle-button {
          background-color: #ffffff;
          border: none;
          border-radius: 50%;
          box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
          transition: all 0.3s ease;
          width: 60px;
          height: 60px;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 24px;
          cursor: pointer;
        }
        .shadow-toggle-button.active-shadow {
          box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.3);
          transform: translateY(-5px);
          background-color: #d9e4ff;
        }
        .button-text {
          transition: transform 0.3s;
        }
        .shadow-toggle-button.active-shadow .button-text {
          transform: scale(1.2);
        }

This toggle button merges functionality with aesthetics. By completing this tutorial, you have learned how to blend captivating visual effects with interactive components, maintaining modern design principles.

Whole code

<div class="shadow-toggle-container">
  <button class="shadow-toggle-button" onclick="toggleShadow()">
    <span class="button-text">🌕</span>
  </button>
</div>

<script>
function toggleShadow() {
  const button = document.querySelector('.shadow-toggle-button');
  const text = document.querySelector('.button-text');
  button.classList.toggle('active-shadow');
  if (button.classList.contains('active-shadow')) {
    text.innerText = '🌑';
  } else {
    text.innerText = '🌕';
  }
}
</script>

<style>
.shadow-toggle-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px;
}
.shadow-toggle-button {
  background-color: #ffffff;
  border: none;
  border-radius: 50%;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  cursor: pointer;
}
.shadow-toggle-button.active-shadow {
  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.3);
  transform: translateY(-5px);
  background-color: #d9e4ff;
}
.button-text {
  transition: transform 0.3s;
}
.shadow-toggle-button.active-shadow .button-text {
  transform: scale(1.2);
}
</style>

Incorporating Elemental Magic in Toggle Buttons

Introduction

HTML

JavaScript

CSS

Whole code

Comments

More toggle-buttons

Similar

See also