Building a tactile Claude action button

A tactile action button with metallic rim, gradient bevel, debossed icon, and realistic press interaction. Pure SVG and CSS — no libraries.

The challenge

Flat design solved a lot of problems, but it also erased tactile feedback. A Claude action button is one of the most common interactions in an AI interface — what if it actually felt like pressing a physical button?

Key decisions

Layered construction

The button is built from concentric rings, each serving a purpose:

• Outer rim — a dark-to-light vertical gradient that mimics brushed metal catching light from above
• Border ring — a thin dark stroke separating the rim from the face, grounding the depth
• Bevel stroke — a three-stop gradient (light, dark, light) creating the illusion of a beveled edge
• Face — the pressable surface with a subtle drop shadow

Debossed icon

The Claude logo uses an SVG inner shadow filter — the highlight sits above the icon, the shadow below. This creates the impression of the icon being stamped into the metal surface rather than printed on top.

Press interaction

When pressed, the drop shadow swaps to an inset shadow and the icon turns orange. The outer rim stays fixed — it’s the housing, not the moving part. No CSS transforms on SVG elements, which would break the userSpaceOnUse gradients.

What I learned

SVG filters are powerful but finicky. userSpaceOnUse gradients don’t move with CSS transforms — they’re anchored to the coordinate space. The solution was to avoid transforms entirely and simulate the press through shadow and fill changes, which is actually more physically accurate anyway.