divot.css
v0.2.0
divot.css
A simple skeuomorphic button style for a satisfying button experience.
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.
light ground lo hi face · flush hi lo 2px
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.
.divotEdit The default, flush with the page.
aria-pressedHeld A toggle held down while on.
.raiseSave The primary action, raised.
.quietFile away Borderless until hovered.
.ghostCancel A lighter cut, for grouped buttons.
.firmExport A deeper cut, for busy backgrounds.
.bareRow item No border, for list and menu rows.
.icon☾ A square box for a single icon.
.easedShare Softly rounded 3px corners.
.pillFilter Fully rounded, for chips and filters.
.dangerDelete Inverts on hover, for deletes.
:disabledUndo Faded, but keeps its size.
elevation
+1 / .raiseSave Raised, for the primary action.
0 / .divotEdit Flush, the default resting state.
−1 / pressedBold 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; }
Copy
Reset 2×
Edit drag it
reference
How to use this stylesheet.
classes.divotthe button .raiseone band up, the primary .quiet .ghost .firmstrength 0 / 25 / 70 .bareno walls .iconsquare box for a glyph .eased .pill3px / full-round corners .dangerinverts on hover
states:hovergroove deepens :activeface sinks, label nudges \[aria-pressed="true"\]stays sunk .activesame, as a class :disabledflat groove, faint ink :focus-visible1px outline, keep it
tokens · set on a container\--divot-groundthe surface it's cut into --divot-strength0–100 --divot-radius0 by default --divot-padding-y / -xthe box; not `padding`\--divot-raise-strengthhow far .raise lifts --divot-light-angle315deg 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>