Gradient Actions

When to use gradient, secondary, and ghost button styles. Includes glow shadow effects for primary actions.

Button Hierarchy

When to Use Each Style

Gradient

One per page/section. The most important action: Submit, Save, Create, Publish.

Secondary

Supporting actions: Cancel, Back, Edit. Can appear multiple times.

Ghost

Tertiary actions: Learn more, View all, minor navigation links.

Glow Shadow Effect

The primary gradient button uses a colored box-shadow that matches the gradient to create a "glow" effect, increasing visual prominence.

Without shadow

With glow shadow

css

/* Gradient primary button */
.btn-primary {
  background: linear-gradient(135deg, #1db954, #059669);
  color: #ffffff;
  border: none;
  border-radius: 10px;
  padding: 12px 28px;
  font-weight: 600;
  box-shadow: 0 4px 20px rgba(29, 185, 84, 0.35);
  cursor: pointer;
}

/* Secondary button */
.btn-secondary {
  background: #ffffff;
  color: #0a0a0a;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  padding: 12px 28px;
  font-weight: 600;
  cursor: pointer;
}

/* Ghost button */
.btn-ghost {
  background: transparent;
  color: #525252;
  border: none;
  border-radius: 10px;
  padding: 12px 28px;
  font-weight: 500;
  cursor: pointer;
}

Token Reference

Prop	Type	Default	Description	Required
gradient	`CSS gradient`	linear-gradient(135deg, #1db954, #059669)	Primary action gradient	No
glow-shadow	`box-shadow`	0 4px 20px rgba(29,185,84,0.35)	Glow effect for gradient buttons	No
border-color	`color`	#e5e5e5	Border for secondary buttons	No
border-radius	`px`	10px	Button corner rounding	No

Guidelines

Limit gradient buttons to one per visible section to maintain hierarchy.
Always pair a primary action with a secondary (e.g., "Save" + "Cancel").
Glow shadow should only appear on gradient buttons, never on secondary or ghost.
On hover, slightly increase the glow spread for a responsive feel.
Disabled states should reduce opacity to 0.5 and remove the glow shadow.