Pro preview
Theme
A real <button> carrying .btn-neo-circle — the preview is the stylesheet, not a picture of it.
States
default
hover
focus-visible
active
disabled
not declared
.btn-neo-circle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 58px;
height: 58px;
border: none;
border-radius: 50%;
background: #e0e5ec;
color: #6366f1;
font-family: inherit;
font-size: 22px;
font-weight: 600;
cursor: pointer;
box-shadow: 7px 7px 14px #bec3cf, -7px -7px 14px #ffffff;
transition: box-shadow 0.2s ease;
}
.btn-neo-circle:hover {
box-shadow: 4px 4px 10px #bec3cf, -4px -4px 10px #ffffff;
}
.btn-neo-circle:active {
box-shadow: inset 4px 4px 8px #bec3cf, inset -4px -4px 8px #ffffff;
}
.btn-neo-circle:focus-visible {
outline: 2px solid currentColor;
outline-offset: 3px;
}
Self-contained · MIT · no build step.btn-neo-circle
NeumorphicCircle
Implementation notes
About the Neo Circle CSS button
Neo Circle uses paired highlights and shadows that lift the control from its surface. Its circular geometry works best for a short label or icon-led action. Its depth comes from a two-layer shadow. The interaction stays intentionally restrained.
Usage
<button class="btn-neo-circle">→</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
- Circle
- 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.