CSS Gradient Button — Hover Effects, Border & Animated Examples

Updated: May 2026

Gradient buttons elevate call-to-action elements from flat rectangles to polished, tactile components. CSS makes it easy to add subtle hover lifts, gradient borders and color-shift animations — all without a single image file.

Generate your gradient →

Free · No upload · In your browser

Live demos — hover to interact

Basic gradient button

.btn-gradient {
  padding: 12px 28px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.15s;
}
.btn-gradient:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
}

The hover lift is achieved by combining a small translateY(-2px) with a matching drop shadow. The shadow color should match the dominant hue of the gradient — use its RGB values with a 0.3–0.5 alpha.

Gradient border button

CSS cannot apply a gradient directly to border-color. The standard technique uses a pseudo-element:

.btn-gradient-border {
  position: relative;
  padding: 12px 28px;
  background: transparent;
  border: 2px solid transparent;
  border-radius: 8px;
  color: #667eea;
  font-weight: 600;
  cursor: pointer;
  background-clip: padding-box;
}
.btn-gradient-border::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, #667eea, #764ba2);
  z-index: -1;
}

The background-clip: padding-box stops the button's own background from bleeding into the border zone. The ::before pseudo-element sits behind the button (z-index: -1) and its gradient shows through the transparent border area.

This pseudo-element trick requires the button's parent to have a defined background so the z-index: -1 layer does not disappear behind a transparent parent.

Hover color-shift animation

Since CSS cannot transition between two gradient values, animate the background-position over an oversized gradient:

.btn-shift {
  background: linear-gradient(135deg, #667eea, #764ba2, #f5576c, #667eea);
  background-size: 300% 100%;
  background-position: 0% 50%;
  color: #fff;
  padding: 12px 28px;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: background-position 0.5s ease;
}
.btn-shift:hover {
  background-position: 100% 50%;
}

The gradient is 300% wide. Moving the position from 0% to 100% on hover sweeps the visible window across the gradient, creating a smooth hue shift. The transition on background-position is fully supported in all modern browsers.

Press / active state

An active state provides tactile feedback when the button is clicked:

.btn-gradient:active {
  transform: translateY(1px);
  box-shadow: 0 2px 6px rgba(102, 126, 234, 0.3);
}

The upward movement from hover is reversed slightly on click, mimicking a physical press. This small detail significantly improves perceived quality.

Accessibility checklist

Ensure sufficient contrast between the button text (color: #fff) and both ends of the gradient. Both colors must pass WCAG AA (4.5:1 ratio for normal text).
Keep a visible focus ring: override outline with a custom style rather than removing it. A gradient glow via box-shadow on :focus-visible is a common pattern.
Do not rely on color alone to communicate state — the hover lift and shadow convey the interactive nature alongside the gradient.

Frequently asked questions

Can I transition a CSS gradient on hover?

Not directly — CSS cannot interpolate between two gradient values. The two main workarounds are: animating background-position on an oversized gradient, or using the CSS @property at-rule to register and transition individual color stop values as custom properties in modern Chromium and Firefox.

How do I apply a gradient to a button border?

Use a pseudo-element positioned absolutely behind the button with z-index: -1, sized to the button plus the border width on each side using inset: -2px. Set the gradient as the pseudo-element's background. The button must have background-clip: padding-box and a transparent border to reveal it.

Why does my gradient button look flat on mobile?

Mobile screens typically render at higher pixel density. A gradient that looks rich on desktop may appear washed out if the colors are too close in lightness. Add a slight opacity or brightness difference between stops — at least 15–20% lightness change — to ensure the gradient remains visible at small sizes.