background
Buttons should be satisfying to press.
Real physical buttons are so satisfying to press, and I wanted to try to bring that feeling to the web. The key feature of this stylesheet is a soft divot around the button that keeps its face flush with the surface.
It’s a simple, no-frills skeuomorphic style that mimics light catching the edges of the cut. The result is a page that feels tangible and makes you want to click things.
gallery
Every divot button type.
Add one modifier to .divot to change its style. Every variant keeps the same size, so they line up in any layout.
.divot The default, flush with the page.
aria-pressed A toggle held down while on.
.raise The primary action, raised.
.quiet Borderless until hovered.
.ghost A lighter cut, for grouped buttons.
.firm A deeper cut, for busy backgrounds.
.bare No border, for list and menu rows.
.icon A square box for a single icon.
.eased Softly rounded 3px corners.
.pill Fully rounded, for chips and filters.
.danger Inverts on hover, for deletes.
:disabled Faded, but keeps its size.
elevation
+1 / .raise Raised, for the primary action.
0 / .divot Flush, the default resting state.
−1 / pressed Pressed in, where every click lands.
customize
Change your light source.
Every wall on the page takes its light from one value. Drag the lamp around the ring to move it. The button inside is a real .divot: see the cut up close at 2×, or switch to 1× for actual size.
:root { --divot-light-angle: 315deg; }
reference
How to use this stylesheet.
classes
- .divot
- the button
- .raise
- one band up, the primary
- .quiet .ghost .firm
- strength 0 / 25 / 70
- .bare
- no walls
- .icon
- square box for a glyph
- .eased .pill
- 3px / full-round corners
- .danger
- inverts on hover
states
- :hover
- groove deepens
- :active
- face sinks, label nudges
- [aria-pressed="true"]
- stays sunk
- .active
- same, as a class
- :disabled
- flat groove, faint ink
- :focus-visible
- 1px outline, keep it
tokens · set on a container
- --divot-ground
- the surface it's cut into
- --divot-strength
- 0–100
- --divot-radius
- 0 by default
- --divot-padding-y / -x
- the box; not
padding - --divot-raise-strength
- how far .raise lifts
- --divot-light-angle
- 315deg by default
install
Add it to your project.
one file
<link rel="stylesheet" href="divot.css"> <button class="divot">Edit</button>
on a surface that isn't the page
<div class="ground-surface"> <button class="divot">Edit</button> </div>