Creating a Weightless Floating Feather Effect Button

This tutorial will guide you step-by-step through the creation of a delightful, airy toggle button inspired by the soft weightlessness of a feather.

HTML

The button is encapsulated within a <main> tag to leverage its semantic role for major content sections, aiding accessibility and SEO.

<main class="feather-button-container">
  <button onclick="toggleFeatherEffect()" class="feather-toggle-button" aria-label="Toggle feather effect">
    <span class="toggle-state">INACTIVE</span>
  </button>
</main>

JavaScript

let isActive = false;
function toggleFeatherEffect() {
  const button = document.querySelector('.feather-toggle-button');
  const stateText = document.querySelector('.toggle-state');
  isActive = !isActive;
  if (isActive) {
    button.style.animation = "floating 2s infinite ease-in-out";
    stateText.textContent = "ACTIVE";
    button.classList.add('active-feather');
    document.body.style.backgroundColor = '#e0f7fa';
  } else {
    button.style.animation = "";
    stateText.textContent = "INACTIVE";
    button.classList.remove('active-feather');
    document.body.style.backgroundColor = '#ffffff';
  }
}

CSS

.feather-button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.feather-toggle-button {
  padding: 20px 40px;
  border: none;
  border-radius: 30px;
  background: rgba(255,255,255,0.6);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #00796b;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
  outline: none;
}

.active-feather {
  transform: translateY(-10px);
  box-shadow: 0 12px 24px 0 rgba(31, 38, 135, 0.37);
}
@keyframes floating {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

Follow these steps to experience a toggle button that feels as light as air, an interaction that's as soft as a feather floating on the breeze.