An inset press feedback button built with pure HTML and CSS that visually simulates a pressed or inset state on interaction, providing tactile-like feedback without relying on JavaScript or external libraries.
Usage
This component is ideal for interfaces where press-style interaction feedback improves usability, such as action buttons, controls, or UI elements that benefit from a physical “pressed” feel.
Implementation
The inset press effect is achieved using CSS box-shadow, transitions, and pseudo-elements, allowing the button to visually shift inward on interaction while keeping the implementation lightweight and reusable.
HTML
<button class="btn-inset">
Press
</button>CSS
.btn-inset {
width: 200px;
padding: 0.75rem;
border-radius: 11px;
border: none;
background: #f3f4f6;
color: #111827;
font-size: 13px;
font-weight: 600;
box-shadow:
inset 0 0 0 rgba(0,0,0,0),
0 10px 20px rgba(0,0,0,0.12);
cursor: pointer;
transition: box-shadow 150ms ease, transform 150ms ease;
}
.btn-inset:active {
transform: translateY(1px);
box-shadow:
inset 4px 4px 8px rgba(0,0,0,0.15);
}
@media (prefers-color-scheme: dark) {
.btn-inset {
background: #111827;
color: #e5e7eb;
}
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Simulates a pressed / inset interaction state
- Enhances usability with tactile-style feedback
- Lightweight and performance-friendly
- 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.