Soft gradient upload
Full-width primary CTA with a subtle rose vertical gradient (rose-300 to rose-500), matching border (rose-600), and a minimal two-layer shadow — one inset top highlight and one soft outer lift. Lighter than the layered inset primary buttons.
typescriptreactbuttontailwindprimary
Notes
Only two shadow layers: inset 0 1px 0 0 at 20% white for a soft top edge, and 0 2px 1px for a barely-there lift. This reads as subtle and modern compared to the multi-layer inset stacks on other primary buttons.
The gradient runs from rose-300 (top) to rose-500 (bottom) with border rose-600 so the rim stays crisp on light backgrounds.
rounded-lg plus w-full keeps the control approachable without the full pill shape; swap the label without touching the shadow recipe.