Back
Learn to build an enchanting toggle button inspired by the Aurora Borealis, blending soothing gradients and animations.
<div class="aurora-container">
<button onclick="toggleAurora()" class="toggle-aurora-button" aria-label="Toggle Aurora Effect">
<span class="toggle-label">REST</span>
</button>
</div>
The button includes an accessible aria-label so screen readers can announce the button's purpose. let isActive = false;
function toggleAurora() {
const button = document.querySelector('.toggle-aurora-button');
const label = document.querySelector('.toggle-label');
isActive = !isActive;
if (isActive) {
button.style.background = "linear-gradient(135deg, rgba(0, 255, 150, 0.8), rgba(0, 150, 255, 0.8))";
label.textContent = "ACTIVE";
button.classList.add('aurora-active');
} else {
button.style.background = "linear-gradient(135deg, rgba(255, 100, 250, 0.8), rgba(150, 50, 255, 0.8))";
label.textContent = "REST";
button.classList.remove('aurora-active');
}
}
Notice how the button's background and text change based on the state, making it clear to all users whether the effect is 'ACTIVE' or in 'REST'. .aurora-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
This .aurora-container class centers our button using flexbox.
.toggle-aurora-button {
border: none;
padding: 20px 40px;
border-radius: 40px;
color: #fff;
font-size: 20px;
font-weight: bold;
transition: background 1s, transform 0.5s;
cursor: pointer;
position: relative;
background: linear-gradient(135deg, rgba(255, 100, 250, 0.8), rgba(150, 50, 255, 0.8));
}
The .toggle-aurora-button class defines the initial styles of our button, with smooth transitions that allow for delightful visual feedback.
.toggle-aurora-button::before {
content: "";
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
background: linear-gradient(45deg, rgba(0, 0, 0, 0.1), rgba(0, 255, 255, 0.2));
z-index: -1;
border-radius: 45px;
transition: transform 0.5s ease-out;
}
The pseudo-element ::before creates a stunning luminous backdrop.
.aurora-active::before {
transform: scale(1.1);
filter: blur(5px);
}
When active, it enhances the mystical glow with a subtle blur effect, presenting a serene Aurora Borealis-like aura.
The .aurora-active class also adds shadows to heighten the visual appeal and simulate a more engaging toggle sensation.<div class="aurora-container"><button onclick="toggleAurora()" class="toggle-aurora-button" aria-label="Toggle Aurora Effect"><span class="toggle-label">REST</span></button></div>
<script>
let isActive = false;
function toggleAurora() {
const button = document.querySelector('.toggle-aurora-button');
const label = document.querySelector('.toggle-label');
isActive = !isActive;
if (isActive) {
button.style.background = "linear-gradient(135deg, rgba(0, 255, 150, 0.8), rgba(0, 150, 255, 0.8))";
label.textContent = "ACTIVE";
button.classList.add('aurora-active');
} else {
button.style.background = "linear-gradient(135deg, rgba(255, 100, 250, 0.8), rgba(150, 50, 255, 0.8))";
label.textContent = "REST";
button.classList.remove('aurora-active');
}
}
</script>
<style>
.aurora-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.toggle-aurora-button {
border: none;
padding: 20px 40px;
border-radius: 40px;
color: #fff;
font-size: 20px;
font-weight: bold;
transition: background 1s, transform 0.5s;
cursor: pointer;
position: relative;
background: linear-gradient(135deg, rgba(255, 100, 250, 0.8), rgba(150, 50, 255, 0.8));
}
.toggle-aurora-button::before {
content: "";
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
background: linear-gradient(45deg, rgba(0, 0, 0, 0.1), rgba(0, 255, 255, 0.2));
z-index: -1;
border-radius: 45px;
transition: transform 0.5s ease-out;
}
.aurora-active::before {
transform: scale(1.1);
filter: blur(5px);
}
.aurora-active {
box-shadow: 0 0 20px rgba(0, 255, 150, 0.3), 0 0 40px rgba(0, 150, 255, 0.5);
}
</style>
Thank you for reading this article.
Comments
No comments yet. Be the first to comment!