Craft / Button

Tasteful button

A familiar button with just enough light, depth, and movement to feel physical.

September 10, 2026

Implementation

craft.tsx

import { ArrowUpRight } from "lucide-react"
 
export function TastefulButton() {
  return (
    <button
      type="button"
      className="inline-flex h-9 items-center gap-2 rounded-lg border border-zinc-800 bg-linear-to-b from-zinc-700 via-zinc-800 to-zinc-950 px-4 text-sm font-medium text-white shadow-[0_1px_1px_rgb(0_0_0/0.08),0_2px_6px_rgb(0_0_0/0.16),inset_0_1px_0_rgb(255_255_255/0.18)] transition-[filter,transform,box-shadow] duration-150 ease-out hover:brightness-105 active:translate-y-px active:scale-[0.98]"
    >
      View project
      <ArrowUpRight className="size-3.5" aria-hidden="true" />
    </button>
  )
}

How it works

Start with shape

Keep the control compact, give the label room, and use a radius that feels native to the surrounding interface.

Add a light source

A quiet vertical gradient and a one-pixel inset highlight make the surface read as an object instead of a flat fill.

Make the press honest

Move it by one pixel and reduce its scale slightly. The response is visible without turning into an animation showcase.