Back
Learn how to design a calming toggle button featuring drifting clouds and dynamic sky colors to enhance any user experience with tranquility.
<div class="sky-container">
<button onclick="cloudDrift()" class="toggle-cloud-button" aria-label="Toggle cloud drift mode">
<span class="toggle-status">Calm</span>
</button>
</div>
cloudDrift function, bannering state through a boolean.
The changing conditions of this state manifest visually, transcending button aesthetics and overarching page background.
let isCalm = true;
function cloudDrift() {
const button = document.querySelector('.toggle-cloud-button');
const statusText = document.querySelector('.toggle-status');
isCalm = !isCalm;
if (isCalm) {
button.style.background = "linear-gradient(180deg, #a0e7f3, #f3f0ff)";
statusText.textContent = "Calm";
button.classList.remove('cloud-active');
document.body.style.backgroundImage = "none";
} else {
button.style.background = "linear-gradient(180deg, #5dade2, #1c72b8)";
statusText.textContent = "Drift";
button.classList.add('cloud-active');
document.body.style.backgroundImage = "url('https://images.unsplash.com/photo-1499084732479-de2c02d45fc4?fit=crop&w=1600&q=80')";
document.body.style.backgroundSize = "cover";
}
}
.sky-container class, simplifying positioning through flexbox's grace.
.sky-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
The heart of meteorological charm resides in .toggle-cloud-button, embracing a serene sky gradient, enlivened further by nuanced transitions and shadowed allure.
.toggle-cloud-button {
border: none;
padding: 20px 40px;
border-radius: 50px;
color: #ffffff;
font-size: 20px;
font-weight: bold;
transition: background 0.5s, transform 0.3s;
cursor: pointer;
background: linear-gradient(180deg, #a0e7f3, #f3f0ff);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}
The .cloud-active class gently nudges the button upwards, casting a larger shadow that simulates an elemental ascent.
.cloud-active {
transform: translateY(-10px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
}
Through this creation, tranquility and cloud-drifting intrigue become essential components of an engaging, ambient user interface.<div class="sky-container">
<button onclick="cloudDrift()" class="toggle-cloud-button" aria-label="Toggle cloud drift mode">
<span class="toggle-status">Calm</span>
</button>
</div>
<script>
let isCalm = true;
function cloudDrift() {
const button = document.querySelector('.toggle-cloud-button');
const statusText = document.querySelector('.toggle-status');
isCalm = !isCalm;
if (isCalm) {
button.style.background = "linear-gradient(180deg, #a0e7f3, #f3f0ff)";
statusText.textContent = "Calm";
button.classList.remove('cloud-active');
document.body.style.backgroundImage = "none";
} else {
button.style.background = "linear-gradient(180deg, #5dade2, #1c72b8)";
statusText.textContent = "Drift";
button.classList.add('cloud-active');
document.body.style.backgroundImage = "url('https://images.unsplash.com/photo-1499084732479-de2c02d45fc4?fit=crop&w=1600&q=80')";
document.body.style.backgroundSize = "cover";
}
}
</script>
<style>
.sky-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.toggle-cloud-button {
border: none;
padding: 20px 40px;
border-radius: 50px;
color: #ffffff;
font-size: 20px;
font-weight: bold;
transition: background 0.5s, transform 0.3s;
cursor: pointer;
background: linear-gradient(180deg, #a0e7f3, #f3f0ff);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}
.cloud-active {
transform: translateY(-10px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
}
</style>
Thank you for reading this article.
Comments
No comments yet. Be the first to comment!