Back
Discover how to build a button with a unique rainfall effect, reminiscent of the way raindrops trickle, blending soothing visuals with tactile interactivity.
<div class="drizzle-container">
<button onclick="toggleDrizzle()" class="drizzle-button" aria-label="Toggle Rainfall Effect">
<span class="drizzle-state">Start Drizzle</span>
</button>
</div>
let isDrizzling = false;
function toggleDrizzle() {
const button = document.querySelector('.drizzle-button');
const stateText = document.querySelector('.drizzle-state');
isDrizzling = !isDrizzling;
if (isDrizzling) {
button.style.background = "linear-gradient(180deg, rgba(0, 191, 255, 0.9), rgba(135, 206, 250, 0.7))";
stateText.textContent = "Stop Drizzle";
button.classList.add('drizzle-on');
} else {
button.style.background = "linear-gradient(180deg, rgba(173, 216, 230, 0.9), rgba(240, 248, 255, 0.7))";
stateText.textContent = "Start Drizzle";
button.classList.remove('drizzle-on');
}
}
.drizzle-container class is styled for centralization using flexbox, ensuring the button is perfectly placed mid-screen.
.drizzle-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
The .drizzle-button shares the fluid aesthetics of a light drizzle, thanks to a soft gradient paired with box-shadow that subtly changes its dynamics.
.drizzle-button {
border: none;
padding: 15px 30px;
border-radius: 10px;
color: white;
font-size: 18px;
font-weight: bold;
transition: background 0.5s, box-shadow 0.3s;
cursor: pointer;
background: linear-gradient(180deg, rgba(173, 216, 230, 0.9), rgba(240, 248, 255, 0.7));
box-shadow: 0 4px 14px rgba(0,0,0,0.1);
}
The .drizzle-on class introduces a calm and serene alteration, akin to how raindrops distort shadows, invoking a sense of light rain and peace.
.drizzle-on {
box-shadow: inset 0 0 15px rgba(0, 191, 255, 0.5), 0 0 20px rgba(135, 206, 250, 0.5);
}
Accessibility is paramount, with the button having both keyboard focus and descriptive aria-label, allowing assistive technologies to communicate its function effectively.
<div class="drizzle-container">
<button onclick="toggleDrizzle()" class="drizzle-button" aria-label="Toggle Rainfall Effect">
<span class="drizzle-state">Start Drizzle</span>
</button>
</div>
<script>
let isDrizzling = false;
function toggleDrizzle() {
const button = document.querySelector('.drizzle-button');
const stateText = document.querySelector('.drizzle-state');
isDrizzling = !isDrizzling;
if (isDrizzling) {
button.style.background = "linear-gradient(180deg, rgba(0, 191, 255, 0.9), rgba(135, 206, 250, 0.7))";
stateText.textContent = "Stop Drizzle";
button.classList.add('drizzle-on');
} else {
button.style.background = "linear-gradient(180deg, rgba(173, 216, 230, 0.9), rgba(240, 248, 255, 0.7))";
stateText.textContent = "Start Drizzle";
button.classList.remove('drizzle-on');
}
}
</script>
<style>
.drizzle-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.drizzle-button {
border: none;
padding: 15px 30px;
border-radius: 10px;
color: white;
font-size: 18px;
font-weight: bold;
transition: background 0.5s, box-shadow 0.3s;
cursor: pointer;
background: linear-gradient(180deg, rgba(173, 216, 230, 0.9), rgba(240, 248, 255, 0.7));
box-shadow: 0 4px 14px rgba(0,0,0,0.1);
}
.drizzle-on {
box-shadow: inset 0 0 15px rgba(0, 191, 255, 0.5), 0 0 20px rgba(135, 206, 250, 0.5);
}
:focus-visible {
outline: 2px solid #00bfff;
}
</style>
Thank you for reading this article.
Comments
No comments yet. Be the first to comment!