Back
Crafting a Soundwave-Inspired Toggle Button Masterpiece
Discover how to design an innovative toggle button that visually mimics soundwaves, transforming with each toggle from serene to vibrant.
Component Explanation
Crafting a Soundwave-Inspired Toggle Button Masterpiece
In this tutorial, you'll embark on a journey to create a soundwave-inspired toggle button. This button visually mimics soundwaves, transforming from a 'CALM' state to an 'ACTIVE' state filled with vibrant colors and dynamic effects.HTML Structure
We begin by establishing the foundational HTML structure. The button is encased in a div with the class 'soundwave-container'. It features an initial 'CALM' state embedded within a span element.
<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>
JavaScript Logic
The JavaScript focuses on handling the soundwave button's state. We define a functiontoggleSoundwave, 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');
}
}
CSS Styling
This CSS section is crucial for the button's aesthetic transformation. The.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.Conclusion
By crafting this soundwave-inspired toggle button, you've explored elements of design and interactivity that hint at the broader potential of creative yet functional UI components.Whole code
<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