Performance Button

Variants

Label transition (click to toggle blur-out)

Component Code (Next.js)

// See /src/components/PerformanceButton.tsx for full source

Claude / Codex Prompt

Recreate the dark pill-shaped Subscribe button from performance.dev:
- 56px tall, 138px min-width, 32px horizontal padding, 999px border-radius
- Background rgb(10,13,26), white text, 16px / 500 weight
- Two-layer box-shadow (close + long ambient)
- Inset gradient ring via ::after pseudo-element with mask trick (top/bottom light, middle dark)
- Hover/active background rgb(22,27,48) with 0.2s / 0.1s transition
- Inner span animates opacity + 6px blur during leaving state.