Back
Discover the mystique of a toggle button that transforms like a spinning cloud between serene day and starry night with whimsicality.
In this tutorial, we will create a unique and visually captivating toggle button that emulates the playful transformation of clouds, shifting between a calming daylight and a sparkling night sky. It is designed to surprise and delight users with its magical toggling capabilities.
<div class="cloudscape-container">
<button onclick="toggleCloudTwist()" class="toggle-cloud-button" aria-label="Toggle between day and night">
<span class="cloud-state">Day</span>
</button>
</div>
We use semantic HTML such as <button> and ensure to include the aria-label for accessibility.isDay helps keep track of this state.
let isDay = true;
function toggleCloudTwist() {
const button = document.querySelector('.toggle-cloud-button');
const stateText = document.querySelector('.cloud-state');
isDay = !isDay;
if (isDay) {
button.style.background = 'linear-gradient(45deg, #87CEEB, #FFF)';
stateText.textContent = "Day";
button.classList.remove('night-mode');
} else {
button.style.background = 'linear-gradient(45deg, #282C35, #191970)';
stateText.textContent = "Night";
button.classList.add('night-mode');
}
}
.cloudscape-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
The .toggle-cloud-button style describes a button that initially looks light blue like a sunny sky. The transition between day and night is animated with soft rotations and shadows mimicking the whims of a dreamlike sky.
.toggle-cloud-button {
border: none;
padding: 20px 40px;
border-radius: 30px;
color: #FFF;
font-size: 16px;
font-weight: bold;
transition: background 0.6s ease, transform 0.3s ease;
cursor: pointer;
background: linear-gradient(45deg, #87CEEB, #FFF);
box-shadow: 0px 4px 6px rgba(0,0,0,0.1);
}
The .night-mode class introduces the night transition with a spinning animation, creating the illusion of a transforming sky from day to night.
.night-mode {
transform: rotate(360deg);
box-shadow: 0 0 20px rgba(255,250,250,0.9), 0 0 25px rgba(100,100,255,0.7);
}
Thus, we've designed a button that isn't just functional but brings a touch of fantasy and wonder to every toggle, transforming the mundane into magical.<div class="cloudscape-container">
<button onclick="toggleCloudTwist()" class="toggle-cloud-button" aria-label="Toggle between day and night">
<span class="cloud-state">Day</span>
</button>
</div>
<script>
let isDay = true;
function toggleCloudTwist() {
const button = document.querySelector('.toggle-cloud-button');
const stateText = document.querySelector('.cloud-state');
isDay = !isDay;
if (isDay) {
button.style.background = 'linear-gradient(45deg, #87CEEB, #FFF)';
stateText.textContent = "Day";
button.classList.remove('night-mode');
} else {
button.style.background = 'linear-gradient(45deg, #282C35, #191970)';
stateText.textContent = "Night";
button.classList.add('night-mode');
}
}
</script>
<style>
.cloudscape-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.toggle-cloud-button {
border: none;
padding: 20px 40px;
border-radius: 30px;
color: #FFF;
font-size: 16px;
font-weight: bold;
transition: background 0.6s ease, transform 0.3s ease;
cursor: pointer;
background: linear-gradient(45deg, #87CEEB, #FFF);
box-shadow: 0px 4px 6px rgba(0,0,0,0.1);
}
.night-mode {
transform: rotate(360deg);
box-shadow: 0 0 20px rgba(255,250,250,0.9), 0 0 25px rgba(100,100,255,0.7);
}
</style>
Thank you for reading this article.
Comments