Back
Discover how to build an intuitive and interactive button that unfurls like a beautiful accordion fan upon interaction.
<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>
toggleFan 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');
}
}
.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.<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