Pro preview
Theme
A real <button> carrying .btn-neo-dark-inset — the preview is the stylesheet, not a picture of it.
States
default
hover
focus-visible
active
disabled
not declared
.btn-neo-dark-inset {
display: inline-block;
padding: 13px 28px;
border: none;
border-radius: 14px;
background: #24262b;
color: #8f95a1;
font-family: inherit;
font-size: 15px;
font-weight: 600;
cursor: pointer;
box-shadow: inset 5px 5px 10px #1b1d21, inset -5px -5px 10px #2d2f35;
transition: box-shadow 0.2s ease, color 0.2s ease;
}
.btn-neo-dark-inset:hover {
color: #38bdf8;
}
.btn-neo-dark-inset:active {
box-shadow: inset 8px 8px 14px #1b1d21, inset -8px -8px 14px #2d2f35;
}
.btn-neo-dark-inset:focus-visible {
outline: 2px solid #38bdf8;
outline-offset: 3px;
}
Self-contained · MIT · no build step.btn-neo-dark-inset
NeumorphicRounded
Implementation notes
About the Neo Dark Inset CSS button
Neo Dark Inset uses paired highlights and shadows that lift the control from its surface. Its rounded corners balance product-friendly softness with a clear boundary. Its depth comes from a two-layer shadow. The interaction stays intentionally restrained.
Usage
<button class="btn-neo-dark-inset">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
- Rounded
- 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
Input75% match
Soft Bloom Smart Input
Soft Bloom kit
soft surfacePastel character
Pro preview
Toggle75% 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.