Pro preview
Theme
A real <button> carrying .btn-neo-pill — the preview is the stylesheet, not a picture of it.
States
default
hover
focus-visible
active
disabled
not declared
.btn-neo-pill {
display: inline-block;
padding: 13px 32px;
border: none;
border-radius: 999px;
background: #e0e5ec;
color: #4a5568;
font-family: inherit;
font-size: 15px;
font-weight: 600;
cursor: pointer;
box-shadow: 8px 8px 16px #bec3cf, -8px -8px 16px #ffffff;
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.btn-neo-pill:hover {
transform: translateY(-1px);
}
.btn-neo-pill:active {
transform: translateY(0);
box-shadow: inset 5px 5px 10px #bec3cf, inset -5px -5px 10px #ffffff;
}
.btn-neo-pill:focus-visible {
outline: 2px solid currentColor;
outline-offset: 3px;
}
Self-contained · MIT · no build step.btn-neo-pill
NeumorphicPill
Implementation notes
About the Neo Pill CSS button
Neo Pill uses paired highlights and shadows that lift the control from its surface. Its pill silhouette makes the label easy to scan in compact layouts. It combines a two-layer shadow and a 200ms hover lift. The interaction stays intentionally restrained.
Usage
<button class="btn-neo-pill">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.