About this set
Chunky buttons that look like physical keys. A solid, unblurred box-shadow in a darker shade of the face colour draws a 6 pixel ledge under each button. On hover the button sinks 2 pixels and the ledge shrinks to match, and while it is pressed it drops all the way onto the ledge, which gives a clear click feel without images or extra markup. The set has four rectangular variants, indigo Press me, green Confirm, amber Warning and a white Neutral button, plus a round red arcade button with a deeper 8 pixel ledge and a soft drop shadow that only reacts to presses. Use them in playful interfaces, games, onboarding flows and kids’ products, where a button that visibly moves suits the tone. Each variant is a set of three custom properties, the face, label and edge colours, so a new colour takes one line. The green face is a deep #15803d so its white label reaches 4.5:1. The Bootstrap version pins every .btn state colour to the face and reuses the ledge as its focus box-shadow, so focus never removes the 3D edge.
What’s included
- Solid box-shadow ledge that shrinks on hover and disappears on press
- Four rectangular colours plus a round arcade button
- One custom property each for face, label and ledge colour
- Ledge kept on keyboard focus in the Bootstrap version
- Transitions removed under prefers-reduced-motion
Accessibility
The buttons are native button elements with visible labels, reachable with Tab and activated with Enter or Space; the arcade button's label is the word Go in the markup and is only uppercased by CSS. Focus shows a 2px indigo outline offset from the button. With prefers-reduced-motion set, the press and hover changes happen instantly instead of animating.
Customise it
Set --td-face, --td-ink and --td-edge on a modifier class (.td-green and so on) in plain CSS, or the same variables on .btn-3d-* in Bootstrap. In Tailwind change the bg-, text- and the three shadow-[0_6px_0_...] utilities per button.
