Back
Crafting an Enchanted Mirror Toggle Using Glassmorphism
Discover the creation of a mystical toggle button that resembles an enchanted mirror, reflecting different states of magic with a captivating sheen.
Component Explanation
Crafting an Enchanted Mirror Toggle Using Glassmorphism
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.
HTML
The HTML structure is straightforward. We define a container to center our button, which acts as a toggle between two mystical states, 'Dormant' and 'Enchanted'.
<div class="mirror-container">
<button onclick="toggleEnchantment()" class="mirror-toggle-button" aria-label="Toggle Enchantment">
<span class="mirror-state">Dormant</span>
</button>
</div>
JavaScript
Our JavaScript takes care of toggling the button's appearance and text between its two states. We utilize a simple function triggered on a button click, where we toggle a boolean to track the state.
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');
}
}
CSS
In the CSS, we employ glassmorphism to provide a visually appealing, modern look. The.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.Whole code
<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