A state-aware neumorphic control button built with pure HTML and CSS that visually reflects different interaction states using soft shadows and depth, without relying on JavaScript or external libraries.
Usage
This component is ideal for interfaces where state visibility and tactile feedback matter, such as control panels, settings toggles, or UI elements that benefit from a soft, physical-style appearance.
Implementation
The neumorphic effect is created using CSS box-shadow layering, transitions, and state-based styling, allowing the button to visually respond to hover, active, or focus states while remaining lightweight and reusable.
HTML
<button class="btn-neumorphic">
Control Toggle
</button>CSS
.btn-neumorphic {
padding: 0.75rem 2rem;
border-radius: 11px;
border: none;
background: #e5e7eb;
color: #111827;
font-weight: 600;
box-shadow:
6px 6px 12px rgba(0,0,0,0.15),
-6px -6px 12px rgba(255,255,255,0.9);
cursor: pointer;
transition: box-shadow 200ms ease, transform 150ms ease;
}
.btn-neumorphic:hover {
box-shadow:
8px 8px 16px rgba(0,0,0,0.18),
-8px -8px 16px rgba(255,255,255,1);
}
.btn-neumorphic:active {
transform: translateY(1px);
box-shadow:
inset 4px 4px 8px rgba(0,0,0,0.15),
inset -4px -4px 8px rgba(255,255,255,0.9);
}
.btn-neumorphic:focus-visible {
outline: 2px solid #6366f1;
outline-offset: 4px;
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Uses neumorphic soft-shadow styling
- Visually reflects interaction and control states
- Smooth transitions with minimal overhead
- Works in modern browsers
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.