Gradient Button is the high-impact CTA button exclusive to the ELFBAR brand, featuring a pink-purple-indigo three-color gradient background (134° linear gradient). Use it for core actions that require the highest visual priority.
Anatomy
Gradient Button is composed of:
- Gradient Container — 134° linear gradient background (pink
#ff5ea7→ purple#c85aff→ indigo#5a74ff), withrgba(255,255,255,0.55)border - Label — Fixed white text (
text-fixed-white-primary), single line, no wrapping - Icon — Optional, leading or trailing, with
ele-smspacing - State Layer — Hover
opacity-90, pressopacity-80
Usage Guidelines
Do ✓
- Use only for the most important brand-level CTAs on a page (e.g. "Shop Now", "Explore More")
- Place at most one Gradient Button per view
- Pair with a leading Star icon or trailing Arrow icon to guide user attention
- Prefer
fullcorner radius (best matches ELFBAR's soft brand personality)
Don't ✗
- Don't place multiple Gradient Buttons on the same row
- Don't use for secondary or low-priority actions (use
brand1oroutlineinstead) - Don't modify the gradient colors (breaks brand consistency)
- Don't layer over dark backgrounds (the gradient is already visually prominent)
Interaction Behavior
| 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 |
Accessibility
| 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 |