This accordion uses centered text and soft expand motion for compact content disclosure.
HTML
<details class="accordion-soft">
<summary class="accordion-soft__trigger">
Details
</summary>
<div class="accordion-soft__content">
Additional information shown here.
</div>
</details>CSS
.accordion-soft {
width: 200px;
text-align: center;
}
.accordion-soft__trigger {
list-style: none;
width: 100%;
padding: 0.6rem;
border-radius: 12px;
background: #6366f1;
color: #ffffff;
font-size: 13px;
cursor: pointer;
user-select: none;
}
.accordion-soft__trigger::-webkit-details-marker {
display: none;
}
.accordion-soft__content {
overflow: hidden;
margin-top: 0.5rem;
padding: 0 0.6rem;
border-radius: 10px;
background: #f9fafb;
color: #111827;
font-size: 12px;
max-height: 0;
opacity: 0;
transform: translateY(-4px);
transition:
max-height 300ms ease,
opacity 200ms ease,
transform 200ms ease,
padding 300ms ease;
}
.accordion-soft[open] .accordion-soft__content {
max-height: 120px;
padding: 0.6rem;
opacity: 1;
transform: translateY(0);
}
@media (prefers-color-scheme: dark) {
.accordion-soft__content {
background: #1f2937;
color: #e5e7eb;
}
}Notes
- Center-aligned for preview cards
- Simple expand pattern
- Good for FAQs and hints
Preview styles shown. Production customization recommended.
Browse More UI Components
Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.