Back
Discover how to design an innovative toggle button that visually mimics soundwaves, transforming with each toggle from serene to vibrant.
<div class="soundwave-container">
<button onclick="toggleSoundwave()" class="toggle-soundwave-button" aria-label="Toggle Soundwave Button">
<span class="toggle-wave-state" aria-live="polite">CALM</span>
</button>
</div>
toggleSoundwave, which leverages a boolean variable waveActive to toggle states.
let waveActive = false;
function toggleSoundwave() {
let button = document.querySelector('.toggle-soundwave-button');
let waveState = document.querySelector('.toggle-wave-state');
waveActive = !waveActive;
if (waveActive) {
button.style.background = "linear-gradient(90deg, rgba(66, 108, 255, 0.9), rgba(66, 255, 176, 0.9))";
waveState.textContent = "ACTIVE";
button.classList.add('wave-active');
} else {
button.style.background = "linear-gradient(90deg, rgba(66, 66, 66, 0.9), rgba(200, 200, 200, 0.9))";
waveState.textContent = "CALM";
button.classList.remove('wave-active');
}
}
.soundwave-container centers the button, ensuring it's readily visible and accessible.
.soundwave-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
Meanwhile, .toggle-soundwave-button governs the button's base design. It smoothly transitions between gradients with each toggle, inspired by soundwaves' dynamic nature.
.toggle-soundwave-button {
border: none;
padding: 15px 40px;
border-radius: 30px;
color: white;
font-size: 18px;
font-weight: bold;
transition: background 0.5s, transform 0.5s;
cursor: pointer;
background: linear-gradient(90deg, rgba(66, 66, 66, 0.9), rgba(200, 200, 200, 0.9));
}
The .wave-active class animates the button, injecting a sense of lively movement akin to soundwaves' rhythmic beats, captured through scaling and shadow effects for an immersive experience.
.wave-active {
transform: scale(1.2);
box-shadow: 0 0 20px rgba(66, 108, 255, 0.7), 0 0 25px rgba(66, 255, 176, 0.7);
}
Through this journey, you've executed a fascinating fusion of visual form and interactive function. This button now doubles as a playful homage to the harmonic beauty of soundwaves.
Each decision—from employing aria-label for accessibility to using aria-live for dynamically updated content—ensures inclusivity and usability at every step.
Remember, you can modify the settings to reflect the preferences for reduced motion by checking for the user's settings and making changes accordingly.<div class="soundwave-container">
<button onclick="toggleSoundwave()" class="toggle-soundwave-button" aria-label="Toggle Soundwave Button">
<span class="toggle-wave-state" aria-live="polite">CALM</span>
</button>
</div>
<script>
let waveActive = false;
function toggleSoundwave() {
let button = document.querySelector('.toggle-soundwave-button');
let waveState = document.querySelector('.toggle-wave-state');
waveActive = !waveActive;
if (waveActive) {
button.style.background = "linear-gradient(90deg, rgba(66, 108, 255, 0.9), rgba(66, 255, 176, 0.9))";
waveState.textContent = "ACTIVE";
button.classList.add('wave-active');
} else {
button.style.background = "linear-gradient(90deg, rgba(66, 66, 66, 0.9), rgba(200, 200, 200, 0.9))";
waveState.textContent = "CALM";
button.classList.remove('wave-active');
}
}
</script>
<style>
.soundwave-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.toggle-soundwave-button {
border: none;
padding: 15px 40px;
border-radius: 30px;
color: white;
font-size: 18px;
font-weight: bold;
transition: background 0.5s, transform 0.5s;
cursor: pointer;
background: linear-gradient(90deg, rgba(66, 66, 66, 0.9), rgba(200, 200, 200, 0.9));
}
.wave-active {
transform: scale(1.2);
box-shadow: 0 0 20px rgba(66, 108, 255, 0.7), 0 0 25px rgba(66, 255, 176, 0.7);
}
</style>
Thank you for reading this article.
Comments
No comments yet. Be the first to comment!