Example: purchase page (skeleton) + compact Add to cart (bottom-right)
Use only for the most important brand-level CTAs on a page (e.g. "Shop Now", "Explore More"). Place at most one per view
Don't place multiple Gradient Buttons on the same row. Don't use for secondary or low-priority actions
Pair with a leading Star icon or trailing Arrow icon to guide user attention. Prefer full corner radius
Don't modify the gradient colors (breaks brand consistency). Don't layer over dark backgrounds
| Interaction | Behavior |
|---|---|
| Click / Touch | Triggers associated action, opacity switches to Active state (0.8) |
| Hover | opacity transitions to 0.9 in 150ms ease |
Keyboard Enter / Space | Triggers click event |
Keyboard Tab | Focus shows brand-pink focus ring |
| Disabled | pointer-events: none, gray background, gradient disappears |
| Requirement | Details |
|---|---|
| Semantic role | Use native <button> element |
| Disabled state | Use disabled attribute |
| Contrast | White text on gradient background contrast ≥ 4.5:1 |
| Focus order | Follows DOM order, supports Tab navigation |