Incorporating Elemental Magic in Toggle Buttons

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

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

JavaScript

        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

        .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);
        }
      

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>