BUTTONS

Liquid Gradient Button

A smooth neon-style gradient button with a glowing hover effect. Copy the code and use it in your own project.

HTML
<button class="liquid-btn" type="button">
  <span>Hover Me</span>
</button>
CSS
.liquid-btn{
  position:relative;
  padding:15px 34px;
  border:0;
  border-radius:999px;
  color:#ffffff;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  overflow:hidden;
  background:linear-gradient(
    90deg,
    #06d9f7 0%,
    #8b5cf6 52%,
    #d946ef 100%
  );
  box-shadow:
    0 0 18px rgba(6,217,247,.25),
    0 0 28px rgba(139,92,246,.28);
  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.liquid-btn:hover{
  transform:translateY(-2px) scale(1.04);
  box-shadow:
    0 0 25px rgba(34,211,238,.45),
    0 0 40px rgba(217,70,239,.35);
}

How This Liquid Gradient Button Works

The Liquid Gradient Button creates a colorful interactive effect using a CSS linear gradient, layered shadows, and smooth transitions. The HTML stays simple, using a standard button with a span for the visible “Hover Me” text.

The button uses a linear-gradient() that moves horizontally from cyan #06d9f7 through purple #8b5cf6 to pink #d946ef. This creates the bright multi-color surface without requiring images. You can learn more about CSS gradients in the MDN Web Docs guide to linear-gradient().

A large border-radius: 999px gives the button its pill-shaped appearance. The initial glow comes from two box-shadow layers using cyan and purple with low opacity, creating a soft light around the gradient.

When the user hovers over the button, translateY(-2px) moves it slightly upward while scale(1.04) makes it slightly larger. These two transformations make the hover interaction feel more responsive.

The hover state also increases the glow using 25px cyan and 40px pink shadows. This spreads the colors further around the button and makes the gradient appear brighter during interaction.

Both the movement and glow use .25s transitions, allowing the button to smoothly move between its normal and hover states.

Customizing This Liquid Gradient Button

You can customize the Liquid Gradient Button by changing a few CSS values while keeping the same HTML structure. The gradient colors, glow strength, button size, corner shape, and hover movement can all be adjusted to match your design.

  • Gradient colors: Change #06d9f7, #8b5cf6, and #d946ef to create your own color combination.
  • Glow strength: Adjust the blur sizes and opacity values inside the box-shadow properties.
  • Button size: Modify padding: 15px 34px to make the button smaller or larger.
  • Corner shape: Change border-radius: 999px if you want less rounded corners.
  • Hover scale: Adjust scale(1.04) to control how much the button grows.
  • Hover movement: Change translateY(-2px) to control how far the button lifts on hover.

Where to Use This Liquid Gradient Button

The Liquid Gradient Button works well in modern interfaces where an important action needs colorful visual emphasis. Its cyan, purple, and pink gradient makes it especially suitable for dark or creative layouts.

  • Call-to-action sections: Use it for actions such as “Get Started,” “Explore,” or “Sign Up.”
  • Landing pages: Add it to hero sections where the primary action needs to stand out.
  • Portfolio websites: Use it for project links, contact buttons, or featured work.
  • Creative websites: The colorful gradient works well with modern and visually expressive designs.
  • Developer websites: Use it in coding, technology, or product-focused interfaces.
  • Dark interfaces: The gradient and glow create strong contrast against dark backgrounds.

Because the visual effect is created entirely with CSS, the button remains lightweight and does not require JavaScript for its hover animation.

If you prefer a single-color glowing style, check out the Neon Glow Button, which uses a bright cyan border and layered shadows to create a neon hover effect.

Frequently Asked Questions

Does the Liquid Gradient Button require JavaScript?
No. The gradient, glow, hover movement, and scaling effects are created entirely with CSS.

How is the colorful gradient created?
The button uses linear-gradient() with cyan, purple, and pink colors arranged horizontally across the background.

Can I change the gradient colors?
Yes. Replace #06d9f7, #8b5cf6, and #d946ef with any colors that match your website or interface.

Can I make the hover glow stronger or softer?
Yes. Adjust the blur sizes and opacity values in the hover box-shadow properties to control the intensity and spread of the glow.

The Liquid Gradient Button combines a vibrant multi-color gradient, layered glow, and smooth hover movement to create an eye-catching interaction. Its CSS-only design keeps the component lightweight, easy to customize, and suitable for modern websites, landing pages, and dark interfaces.

Scroll to Top