Pro preview
Theme
A real <button> carrying .btn-neo-groove — the preview is the stylesheet, not a picture of it.
States
default
hover
focus-visible
active
disabled
not declared
.btn-neo-groove {
display: inline-block;
padding: 13px 30px;
border: none;
border-radius: 999px;
background: #e0e5ec;
color: #4a5568;
font-family: inherit;
font-size: 15px;
font-weight: 600;
cursor: pointer;
box-shadow: 7px 7px 14px #bec3cf, -7px -7px 14px #ffffff, inset 2px 2px 5px #bec3cf, inset -2px -2px 5px #ffffff;
transition: color 0.2s ease, box-shadow 0.2s ease;
}
.btn-neo-groove:hover {
color: #6366f1;
}
.btn-neo-groove:active {
box-shadow: inset 5px 5px 10px #bec3cf, inset -5px -5px 10px #ffffff;
}
.btn-neo-groove:focus-visible {
outline: 2px solid currentColor;
outline-offset: 3px;
}
Self-contained · MIT · no build step.btn-neo-groove
NeumorphicPill
Implementation notes
About the Neo Groove CSS button
Neo Groove uses paired highlights and shadows that lift the control from its surface. Its pill silhouette makes the label easy to scan in compact layouts. Its depth comes from a four-layer shadow. The interaction stays intentionally restrained.
Usage
<button class="btn-neo-groove">Button</button>Pair it with the CSS tab above — the class is self-contained.
Before shipping: keep the semantic button element, verify contrast on your actual background and add a visible
:focus-visible state. If you retain motion, include a prefers-reduced-motion override.- Built with
- HTML + plain CSS
- Shape
- Pill
- Exports
- CSS, Tailwind, React
- License
- MIT · commercial use
Complete the look
Build the interface around this button
We matched its palette, surface, geometry and motion to a complete UI system — like composing an outfit, not browsing unrelated parts.
Style DNA · v1
How matching works →Free sample
Input72% match
Soft Bloom Smart Input
Soft Bloom kit
soft surfacePastel character
Pro preview
Toggle72% match
Soft Bloom Preference Toggle
Soft Bloom kit
soft surfacePastel character
Unlock with Pro →Pro preview
Pro preview
Pro preview
Get the complete Soft Bloom kit
Six coordinated component types, commercial license and future kit updates.