Read the full writeup at https://seangeng.com/writing/a-realistic-hardware-button-in-css.md and implement it in my project.
It covers: A realistic hardware button in pure CSS. Recreating a physical, illuminated push-button in CSS: a gunmetal bezel, a recessed lit-glass panel, a glossy sheen, and a colored light bloom. Three nested layers, layered gradients, inset shadows. No images.
Requirements:
- Follow the technique/approach exactly as described in the writeup.
- Adapt names, colors, and styling to my project's existing conventions.
- If it's a component, make it reusable with sensible props and TypeScript types.
- Keep it accessible: semantic HTML, keyboard support, and respect prefers-reduced-motion.
- When done, tell me which files you created or changed and how to use it.
Flat design won, and then it got boring. Every so often a button comes along
that looks like an actual object, machined metal and lit glass and a real press,
and you remember screens can pretend to be physical. Here's one, built from
three nested layers and a stack of gradients.
Press it. The glass sinks into the housing. No images, no SVG, four ideas.
1. The bezel is the outer element's padding
The metal frame isn't a border. It's the button's padding. A steep gray gradient
plus a few inset bevels turns that band into machined metal lit from above:
.hw-btn { padding: 13px; /* this band IS the bezel */ border-radius: 26px; background: linear-gradient(158deg, #5a5a62, #313137 13%, #1a1a1d 52%, #0a0a0b); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.4), /* bright top edge */ inset -1.5px 0 1px rgba(0,0,0,.55), /* shadowed right */ inset 0 -2px 4px rgba(0,0,0,.7); /* dark bottom inner */}
A lit top edge over a dark bottom is the whole trick for metal. It tells your
eye where the light is.
2. A black well, then convex glass
Don't sit the glass flush in the metal. Float it in a black recessed well. A
middle layer with a near-black fill and a deep inset shadow gives you the dark
margin all around the panel, so the glass reads as a separate part dropped into
the housing:
The glass itself is a dark-to-bright-to-dark vertical gradient. That symmetry is
what sells it as a convex tube lit through the middle, instead of a flat
sticker:
That elliptical bottom radius is what curves the highlight instead of cutting it
flat. It's the difference between glossy and glass. A second pseudo-element
(::after) adds the soft, blurred waterline reflection you see across the lower
third of real curved glass:
An outer box-shadow in the same hue spills a bloom onto the surface below, so
the button looks like it's actually on. The press is physical too: drop it 2px
and deepen the glass shadow so the light pushes inward.
Most of this comes down to one habit: pick a light direction and commit. Lit top
edge, dark bottom, panels recessed under the frame with an inset shadow, every
shade mixed from one color-mix color. Do that and a few <div>s start to look
like hardware.