Back
Discover a novel toggle button that plays tranquil soundscapes while morphing its texture inspired by tactile fabrics.
Have you ever envisioned a toggle button that could appeal to more senses than just sight? In this tutorial, we're embarking on a creative journey to build a toggle button that melds sound and tactile design elements, offering users an immersive experience that shifts between visual and auditory delight when toggled. This button, inspired by serene fabrics, will play subtle melodies and change its texture-like gradients to captivate users in a playful yet calming manner.
Let's begin by setting up the HTML structure, which will center around a container and a button. The button carries a class and an aria-label to aid accessibility, ensuring clear interaction pathways.
<div class="melody-container">
<button onclick="toggleMelody()" aria-label="Toggle Melody and Texture" class="texture-melody-button">
<span class="toggle-state">OFF</span>
</button>
</div>
We use a <div> to contain our button, applying a flexbox-based CSS rule for centering, establishing an aesthetically pleasing setup.
Our toggle functionality is empowered by JavaScript. We create an audio element to incorporate sounds and a boolean variable to track the button's state. When toggled, the button shifts its gradient style, text content, and plays a melody.
let isMelodyOn = false;
function toggleMelody() {
let button = document.querySelector('.texture-melody-button');
let stateText = document.querySelector('.toggle-state');
const fabricSound = new Audio('https://example.com/melody.mp3');
isMelodyOn = !isMelodyOn;
if (isMelodyOn) {
button.style.background = "linear-gradient(135deg, rgba(173,216,230,0.9), rgba(255,192,203,0.9))";
stateText.textContent = "ON";
button.classList.add('melody-on');
fabricSound.play();
} else {
button.style.background = "linear-gradient(135deg, rgba(240,248,255,0.9), rgba(255,228,225,0.9))";
stateText.textContent = "OFF";
button.classList.remove('melody-on');
fabricSound.pause();
}
}
Loading the sound asynchronously ensures smooth performance without lag, crucial for a seamless UX.
The visual transformation is mainly handled by CSS, using gradients and shadow effects to simulate textures. Additionally, focus outlines improve keyboard accessibility, and media queries cater to users who prefer reduced motion.
.melody-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.texture-melody-button {
border: none;
padding: 15px 30px;
border-radius: 50px;
color: white;
font-size: 18px;
font-weight: bold;
transition: background 0.5s, transform 0.3s;
cursor: pointer;
background: linear-gradient(135deg, rgba(240,248,255,0.9), rgba(255,228,225,0.9));
outline: none;
}
.texture-melody-button:focus {
outline: 2px solid #0000ff;
}
.melody-on {
transform: scale(1.05);
box-shadow: 0 0 20px rgba(173,216,230,0.7), 0 0 25px rgba(255,192,203,0.7);
}
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition: none !important;
}
}
CSS gradients and shadows create a mimicked fabric effect, guiding the transition between states with grace and ease.
In this innovative project, we've reimagined a core UI pattern by marrying visual appeal with auditory experience. The Melodic Texture Toggle Button serves as an elegant demonstration of how thoughtful design can evoke delight through simple, yet thoughtful interactions.
<div class="melody-container">
<button onclick="toggleMelody()" aria-label="Toggle Melody and Texture" class="texture-melody-button">
<span class="toggle-state">OFF</span>
</button>
</div>
<script>
let isMelodyOn = false;
function toggleMelody() {
let button = document.querySelector('.texture-melody-button');
let stateText = document.querySelector('.toggle-state');
const fabricSound = new Audio('https://example.com/melody.mp3');
isMelodyOn = !isMelodyOn;
if (isMelodyOn) {
button.style.background = "linear-gradient(135deg, rgba(173,216,230,0.9), rgba(255,192,203,0.9))";
stateText.textContent = "ON";
button.classList.add('melody-on');
fabricSound.play();
} else {
button.style.background = "linear-gradient(135deg, rgba(240,248,255,0.9), rgba(255,228,225,0.9))";
stateText.textContent = "OFF";
button.classList.remove('melody-on');
fabricSound.pause();
}
}
</script>
<style>
.melody-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.texture-melody-button {
border: none;
padding: 15px 30px;
border-radius: 50px;
color: white;
font-size: 18px;
font-weight: bold;
transition: background 0.5s, transform 0.3s;
cursor: pointer;
background: linear-gradient(135deg, rgba(240,248,255,0.9), rgba(255,228,225,0.9));
outline: none;
}
.texture-melody-button:focus {
outline: 2px solid #0000ff;
}
.melody-on {
transform: scale(1.05);
box-shadow: 0 0 20px rgba(173,216,230,0.7), 0 0 25px rgba(255,192,203,0.7);
}
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition: none !important;
}
}
</style>
Thank you for reading this article.
Comments