A friendly lifestyle primary: rose-coral fill, white type, full pill, and a hover that lifts 2px with a warm diffused shadow. Feels optimistic without cartoon energy — great for consumer onboarding and e-commerce CTAs.
Export Snippets
Switch formats without compressing the preview layout.
AI Prompt
Natural-language design direction for AI coding tools.
Build a Coral Lift primary button for warm consumer UIs.
1. Pill shape, fill #E11D48 rose-coral, white label, 15px semibold.
2. Resting shadow: 0 4px 14px #E11D4838 — already slightly lifted.
3. Hover: translateY(-2px) and denser shadow 0 10px 24px #E11D4852; darken fill slightly.
4. Transition 200ms cubic-bezier(0.33, 1, 0.68, 1).
5. Pair with peach page backgrounds; never place on pure black.A friendly lifestyle primary: rose-coral fill, white type, full pill, and a hover that lifts 2px with a warm diffused shadow. Feels optimistic without cartoon energy — great for consumer onboarding and e-commerce CTAs.