Back
Develop a meditative toggle button that blossoms like a flower, promoting peaceful interactivity with a touch of zen.
<div class="zen-flower-container">
<button aria-label="Toggle Zen Flower" onclick="toggleFlower()" class="zen-toggle-button">
<span class="flower-state">CLOSED</span>
</button>
</div>
toggleFlower changes the button state, simulating the opening and closing of a flower.
let zenOpen = false;
function toggleFlower() {
let button = document.querySelector('.zen-toggle-button');
let stateText = document.querySelector('.flower-state');
zenOpen = !zenOpen;
if (zenOpen) {
button.style.background = "radial-gradient(circle, rgba(124,255,163,0.9), rgba(0,100,150,0.9))";
stateText.textContent = "OPEN";
button.classList.add('flower-open');
} else {
button.style.background = "radial-gradient(circle, rgba(255,235,59,0.9), rgba(255,152,0,0.9))";
stateText.textContent = "CLOSED";
button.classList.remove('flower-open');
}
}
.zen-flower-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
For the button, the transition effects create a sense of gentle blooming, combining animation with subtle visual flair.
.zen-toggle-button {
border: none;
padding: 15px 40px;
border-radius: 50px;
color: white;
font-size: 18px;
font-weight: bold;
transition: background 0.7s, transform 0.35s;
cursor: pointer;
background: radial-gradient(circle, rgba(255,235,59,0.9), rgba(255,152,0,0.9));
}
Upon activation, the class .flower-open adds scale and vividness, mimicking the opening of petals, creating an engaging tactile experience.
.flower-open {
transform: scale(1.2);
box-shadow: 0 0 20px rgba(124,255,163,0.7), 0 0 25px rgba(0,100,150,0.7);
border-radius: 50px 20px;
}
To offer accessibility, we respect user preferences. Motion-sensitive users can avoid animations with this media query.
@media (prefers-reduced-motion: reduce) {
.zen-toggle-button {
transition: none;
}
}
With this button, we merge interactivity with mindfulness, using minimalistic design to evoke tranquility and focus, offering a serene user experience.
<div class="zen-flower-container">
<button aria-label="Toggle Zen Flower" onclick="toggleFlower()" class="zen-toggle-button">
<span class="flower-state">CLOSED</span>
</button>
</div>
<script>
let zenOpen = false;
function toggleFlower() {
let button = document.querySelector('.zen-toggle-button');
let stateText = document.querySelector('.flower-state');
zenOpen = !zenOpen;
if (zenOpen) {
button.style.background = "radial-gradient(circle, rgba(124,255,163,0.9), rgba(0,100,150,0.9))";
stateText.textContent = "OPEN";
button.classList.add('flower-open');
} else {
button.style.background = "radial-gradient(circle, rgba(255,235,59,0.9), rgba(255,152,0,0.9))";
stateText.textContent = "CLOSED";
button.classList.remove('flower-open');
}
}
</script>
<style>
.zen-flower-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.zen-toggle-button {
border: none;
padding: 15px 40px;
border-radius: 50px;
color: white;
font-size: 18px;
font-weight: bold;
transition: background 0.7s, transform 0.35s;
cursor: pointer;
background: radial-gradient(circle, rgba(255,235,59,0.9), rgba(255,152,0,0.9));
}
.flower-open {
transform: scale(1.2);
box-shadow: 0 0 20px rgba(124,255,163,0.7), 0 0 25px rgba(0,100,150,0.7);
border-radius: 50px 20px;
}
@media (prefers-reduced-motion: reduce) {
.zen-toggle-button {
transition: none;
}
}
</style>
Thank you for reading this article.
Comments