Back
Crafting an Accordion Fan Button with Tactile Motion
Discover how to build an intuitive and interactive button that unfurls like a beautiful accordion fan upon interaction.
Component Explanation
Crafting an Accordion Fan Button with Tactile Motion
HTML
Our HTML section sets the foundation for the Accordion Fan Button. We utilize a<section> tag for semantic grouping, improving both SEO and accessibility.
<section class="accordion-fan">
<button onclick="toggleFan()" class="fan-button" aria-label="Accordion Fan Button">
<span class="fan-text">CLOSED</span>
</button>
</section>
Javascript
Javascript manages the interactive transformation of our button. Upon clicking, the button alternates between open and closed states, rotating to showcase visual dynamism. ThetoggleFan function toggles the fanOpen boolean, handling the transform and text update accordingly.
let fanOpen = false;
function toggleFan() {
let button = document.querySelector('.fan-button');
let text = document.querySelector('.fan-text');
fanOpen = !fanOpen;
if (fanOpen) {
button.style.transform = 'rotate(360deg)';
text.textContent = 'OPEN';
button.classList.add('fan-open');
} else {
button.style.transform = 'rotate(0deg)';
text.textContent = 'CLOSED';
button.classList.remove('fan-open');
}
}
CSS
CSS breathes life into the Accordion Fan Button, utilizing modern tactile motion and engaging visual effects akin to an unfolding fan.
.accordion-fan {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
The .fan-button class applies transitions and gradient backgrounds, changing smoothly in response to user interaction. It begins with a closed state transition.
.fan-button {
border: none;
padding: 20px 40px;
border-radius: 25px;
background: linear-gradient(135deg, #ff7eb9, #ff65a3);
color: white;
font-size: 20px;
font-weight: bold;
transition: transform 0.8s ease, background 0.6s ease;
cursor: pointer;
}
The .fan-open class augments the button in its open state, offering a delightful scaling effect coupled with a contrasting gradient.
.fan-open {
transform: scale(1.2);
box-shadow: 0 0 10px rgba(0,0,0,0.3);
background: linear-gradient(135deg, #65e7ff, #657eff);
}
Through these layers of functionality and style, the Accordion Fan Button emerges as a fusion of form and playful interaction.Whole code
<section class="accordion-fan">
<button onclick="toggleFan()" class="fan-button" aria-label="Accordion Fan Button">
<span class="fan-text">CLOSED</span>
</button>
</section>
<script>
let fanOpen = false;
function toggleFan() {
let button = document.querySelector('.fan-button');
let text = document.querySelector('.fan-text');
fanOpen = !fanOpen;
if (fanOpen) {
button.style.transform = 'rotate(360deg)';
text.textContent = 'OPEN';
button.classList.add('fan-open');
} else {
button.style.transform = 'rotate(0deg)';
text.textContent = 'CLOSED';
button.classList.remove('fan-open');
}
}
</script>
<style>
.accordion-fan {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.fan-button {
border: none;
padding: 20px 40px;
border-radius: 25px;
background: linear-gradient(135deg, #ff7eb9, #ff65a3);
color: white;
font-size: 20px;
font-weight: bold;
transition: transform 0.8s ease, background 0.6s ease;
cursor: pointer;
}
.fan-open {
transform: scale(1.2);
box-shadow: 0 0 10px rgba(0,0,0,0.3);
background: linear-gradient(135deg, #65e7ff, #657eff);
}
</style>
Thank you for reading this article.
Comments