Back
Discover the creation of a mystical toggle button that resembles an enchanted mirror, reflecting different states of magic with a captivating sheen.
Immerse yourself in the magic of creating a toggle button inspired by enchanted mirrors. This tutorial walks you through the process of crafting a button using glassmorphism that reveals an altered state when toggled, much like a magical reflection.
<div class="mirror-container">
<button onclick="toggleEnchantment()" class="mirror-toggle-button" aria-label="Toggle Enchantment">
<span class="mirror-state">Dormant</span>
</button>
</div>
let enchanted = false;
function toggleEnchantment() {
const button = document.querySelector('.mirror-toggle-button');
const stateText = document.querySelector('.mirror-state');
enchanted = !enchanted;
if (enchanted) {
button.style.background = "rgba(255, 255, 255, 0.4)";
button.style.backdropFilter = "blur(8px)";
button.style.border = "1px solid rgba(255, 255, 255, 0.2)";
stateText.textContent = "Enchanted";
button.classList.add('mirror-active');
} else {
button.style.background = "rgba(0, 0, 0, 0.2)";
button.style.backdropFilter = "blur(4px)";
stateText.textContent = "Dormant";
button.classList.remove('mirror-active');
}
}
.mirror-toggle-button class is where we implement the glass-like effect that changes subtly when toggled. The styles create an illusion of a frosted glass, enhancing the magical feel.
.mirror-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.mirror-toggle-button {
background: rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 20px 40px;
border-radius: 15px;
color: #fff;
font-size: 20px;
font-weight: bold;
cursor: pointer;
transition: all 0.5s ease;
backdrop-filter: blur(4px);
}
The .mirror-active class adds depth with a slight shadow, enhancing the illusion of a glowing mirror reflection when the button is toggled to the 'Enchanted' state.
.mirror-active {
box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.1);
}
Finally, our polished toggle button not only serves its function elegantly but also captivates with its magical design.<div class="mirror-container">
<button onclick="toggleEnchantment()" class="mirror-toggle-button" aria-label="Toggle Enchantment">
<span class="mirror-state">Dormant</span>
</button>
</div>
<script>
let enchanted = false;
function toggleEnchantment() {
const button = document.querySelector('.mirror-toggle-button');
const stateText = document.querySelector('.mirror-state');
enchanted = !enchanted;
if (enchanted) {
button.style.background = "rgba(255, 255, 255, 0.4)";
button.style.backdropFilter = "blur(8px)";
button.style.border = "1px solid rgba(255, 255, 255, 0.2)";
stateText.textContent = "Enchanted";
button.classList.add('mirror-active');
} else {
button.style.background = "rgba(0, 0, 0, 0.2)";
button.style.backdropFilter = "blur(4px)";
stateText.textContent = "Dormant";
button.classList.remove('mirror-active');
}
}
</script>
<style>
.mirror-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.mirror-toggle-button {
background: rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 20px 40px;
border-radius: 15px;
color: #fff;
font-size: 20px;
font-weight: bold;
cursor: pointer;
transition: all 0.5s ease;
backdrop-filter: blur(4px);
}
.mirror-active {
box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.1);
}
</style>
Thank you for reading this article.
Comments