Tasteful button

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

Demo

Interactive

PlaygroundBuild stages

This is the finished version. Copy it as-is, then adjust the label and destination for your project.

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>
  )
}

The treatment is intentionally self-contained: no extra stylesheet, state, or animation library is required.