← Writing

Buttons that feel like buttons

The raised Register control, dashboard chips and tactile buttons, arrow-nudge links, and the lime pills on the Spandrel marketing page. Click them.

Will Rowston2 min read

  • Design

A button should look like a button before you touch it. Hover should confirm it. Press should feel like travel.

These are the treatments I am using on this site and on the Spandrel marketing page. They are live. Hover them. Click them.

Register

The upcoming event uses a compact raised Register chip. Card fill, a light border and shadow, link-colored type. It is the one action on that row that should look like an action.

Raised Register chip. Hover firms the shadow. Press flattens it.

Inset and raised

The Spandrel dashboard uses the same contrast without looking like a keyboard. Inset chips for invoice numbers, terms, retainage, and counts. They sit in the surface. Raised actions sit on top of it. Press one and it sinks a pixel. The selected tab is the raised one in an inset track.

Dashboard dark. Inset chips for invoice chrome. Raised Save and Add line sink a pixel.
Same pair on light. The selected tab is the raised one in an inset track.

Section links share the same link color. The arrow nudges on hover. A full pill would be too loud for All events and Full history.

Section links. Same link color. The arrow nudges on hover.

Spandrel

The marketing site speaks a different language. Lime primary for Book a demo. Soft raised secondary for See how it works. Both lift on hover and sink on press. The primary arrow grows in when you point at it.

Spandrel marketing. Lime Book a demo and a soft raised See how it works.

On the dark closing band the same lime pill keeps a heavier shadow so it still reads as raised.

Same lime pill on the dark closing band. The shadow gets heavier so it still lifts.

That is the set. Raised for the thing you should do. Inset for chrome that already sits in the surface. An arrow nudge when a full button would shout.