8 Beautiful CSS Gradient Button Styles with Hover Effects

Gradient buttons are one of the fastest ways to elevate a UI. A solid-color button is functional, but a well-crafted gradient button with a polished hover state tells users that every detail of the interface has been considered. Below are eight distinct styles ranging from subtle to bold. Each one is self-contained so you can drop it straight into your project.

Want to design your own gradient first? Use the Gradient Studio to dial in your colors visually, then come back here for the button structure.

1. Simple Gradient Button with Darken on Hover

The most common pattern: a linear gradient background that darkens slightly on hover using a CSS filter: brightness() shift. No extra elements, no pseudo-classes for the overlay, just one line changing perceived lightness.

<button class="btn-simple-gradient">Get Started</button>

<style>
.btn-simple-gradient {
  padding: 14px 32px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  transition: filter 0.25s ease, transform 0.25s ease;
}

.btn-simple-gradient:hover {
  filter: brightness(0.88);
  transform: translateY(-1px);
}
</style>

Lowering brightness to 0.88 on hover creates a natural darkening effect without needing to define a second set of gradient colors. The subtle translateY(-1px) lift reinforces the interactive feel.

2. Animated Gradient Shift

This technique uses an oversized background-size and shifts the background-position on hover. The gradient appears to slide across the button, creating a smooth color-shift animation without any keyframes.

<button class="btn-gradient-shift">Explore</button>

<style>
.btn-gradient-shift {
  padding: 14px 32px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 50%, #4facfe 100%);
  background-size: 200% 200%;
  background-position: 0% 50%;
  transition: background-position 0.5s ease;
}

.btn-gradient-shift:hover {
  background-position: 100% 50%;
}
</style>

The secret is background-size: 200% 200%. The gradient is twice as large as the button, so shifting the position reveals a different color region. You can add more color stops for a richer transition.

3. Gradient Border Button

An outline-style button with a gradient border. The trick uses a gradient background on the outer element with background-clip and a matching padding-box background to punch out the interior, leaving only the gradient visible on the edges.

<button class="btn-gradient-border">Learn More</button>

<style>
.btn-gradient-border {
  padding: 14px 32px;
  font-size: 16px;
  font-weight: 600;
  color: #e0e0e0;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  background:
    linear-gradient(#1a1a2e, #1a1a2e) padding-box,
    linear-gradient(135deg, #667eea, #764ba2) border-box;
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

.btn-gradient-border:hover {
  background:
    linear-gradient(#2a2a4e, #2a2a4e) padding-box,
    linear-gradient(135deg, #764ba2, #667eea) border-box;
  color: #fff;
}
</style>

The padding-box background covers the interior with a solid color, while the border-box gradient shows through the transparent border. On hover, the gradient direction reverses and the inner background lightens.

4. Neon Glow Gradient Button

A vibrant neon button that pulses with a colored glow on hover. The effect relies on a box-shadow with a large spread radius combined with a saturated gradient background.

<button class="btn-neon-glow">Sign Up</button>

<style>
.btn-neon-glow {
  padding: 14px 32px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  background: linear-gradient(135deg, #00f260 0%, #0575e6 100%);
  box-shadow: 0 0 8px rgba(0, 242, 96, 0.3);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.btn-neon-glow:hover {
  box-shadow:
    0 0 16px rgba(0, 242, 96, 0.5),
    0 0 40px rgba(5, 117, 230, 0.3);
  transform: translateY(-2px);
}
</style>

Stacking two box-shadow values with different spread radii and colors creates the classic neon glow. Keep the resting shadow subtle so the hover state has impact.

5. Gradient Button with Box-Shadow Glow

Similar to the neon variant, but tuned for a warmer, more corporate feel. The shadow color matches the dominant gradient hue and expands on hover, creating a soft halo effect.

<button class="btn-shadow-glow">Subscribe</button>

<style>
.btn-shadow-glow {
  padding: 14px 32px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  background: linear-gradient(135deg, #ff6a00 0%, #ee0979 100%);
  box-shadow: 0 4px 15px rgba(238, 9, 121, 0.25);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.btn-shadow-glow:hover {
  box-shadow: 0 8px 30px rgba(238, 9, 121, 0.45);
  transform: translateY(-2px);
}

.btn-shadow-glow:active {
  transform: translateY(0);
  box-shadow: 0 4px 15px rgba(238, 9, 121, 0.3);
}
</style>

Adding an :active state that resets the lift and tightens the shadow gives the button a physical pressed feel. The shadow color is sampled from the gradient's end color for cohesion.

6. Pill-Shaped Gradient with Shine Animation

A fully rounded button with a diagonal shine sweep that plays on hover. The shine is a ::after pseudo-element with a semi-transparent gradient that slides across the surface using a keyframe animation.

<button class="btn-pill-shine">Upgrade Now</button>

<style>
.btn-pill-shine {
  position: relative;
  padding: 14px 36px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  background: linear-gradient(135deg, #7f00ff 0%, #e100ff 100%);
  overflow: hidden;
  transition: transform 0.25s ease;
}

.btn-pill-shine::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255, 255, 255, 0.25) 50%,
    transparent 100%
  );
  transition: none;
}

.btn-pill-shine:hover::after {
  animation: shine 0.6s ease forwards;
}

.btn-pill-shine:hover {
  transform: translateY(-1px);
}

@keyframes shine {
  0%   { left: -100%; }
  100% { left: 100%; }
}
</style>

The overflow: hidden on the button clips the pseudo-element so the shine only appears within the button bounds. The 0.6s duration keeps the sweep brisk enough to feel responsive.

7. Gradient Text Button (Outline Style)

An outlined button where the text itself displays a gradient. This uses the background-clip: text technique to apply a gradient to the letterforms while keeping the background transparent. On hover, the button fills with the gradient and the text switches to white.

<button class="btn-gradient-text">View Demo</button>

<style>
.btn-gradient-text {
  padding: 14px 32px;
  font-size: 16px;
  font-weight: 600;
  border: 2px solid #667eea;
  border-radius: 8px;
  cursor: pointer;
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: all 0.3s ease;
}

.btn-gradient-text:hover {
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: #fff;
  border-color: transparent;
}
</style>

On hover the background-clip switches from text to the default, filling the entire button with the gradient. The border becomes transparent since the gradient now provides the visual boundary.

8. Glass Gradient Button (Glassmorphism)

A frosted-glass button that combines a translucent gradient with backdrop-filter: blur(). The glassmorphism style works best over busy or colorful backgrounds where the blur effect is visible.

<button class="btn-glass-gradient">Continue</button>

<style>
.btn-glass-gradient {
  padding: 14px 32px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  cursor: pointer;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.05) 100%
  );
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

.btn-glass-gradient:hover {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(255, 255, 255, 0.08) 100%
  );
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}
</style>

The backdrop-filter: blur(12px) creates the frosted effect, while the semi-transparent gradient adds a subtle sheen. Increase the border opacity on hover to make the glass edges catch the light. Remember to include the -webkit- prefix for Safari support.

Accessibility Tips for Gradient Buttons

Gradient backgrounds can easily fail contrast requirements if the lighter end of the gradient sits behind white text. Here are practical guidelines to keep your gradient buttons accessible:

• •Check contrast at both endpoints - The text must pass WCAG AA (4.5:1 for normal text, 3:1 for large text) against the lightest color in the gradient, not just the darkest. Use a contrast checker on both gradient stops individually.
• •Avoid very light gradients with white text - Pastel-to-pastel gradients may look elegant but rarely provide enough contrast for readable text.
• •Include a visible focus state - Gradient buttons should have a clear :focus-visible outline. Use a 2px solid outline with an offset so it doesn't blend into the gradient.
• •Don't rely on color alone - If a button's disabled state is shown by fading the gradient, also change opacity, add a not-allowed cursor, and set aria-disabled="true".
• •Test hover and active states too - Darkening or shifting a gradient on hover can change the contrast ratio. Verify readability in every interactive state.

Build Your Own Gradient

These eight button styles are starting points. To create a gradient that matches your brand palette exactly, open the Gradient Studio. You can pick colors visually, adjust angle and stops, then copy the CSS directly into any of the button templates above.

Combine these techniques for even more variety: add a shine animation to a neon glow button, or apply the gradient-border approach to a pill shape. Once you understand how each piece works, mixing and matching is straightforward.