Skip to content
Larwell Technologies
Home / Code Playground / Buttons
Buttons

Animated Gradient Button (Hover Effect)

A modern pill button with an animated gradient that shifts and lifts on hover. Pure CSS.

By Ishrafil Khan Updated June 2026 Bokaro Steel City, India
CSSButtonHover
Live Preview
HTML + CSS + JS 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <style>
    body { margin: 0; height: 100vh; display: grid; place-items: center;
           background: #0f172a; font-family: system-ui, sans-serif; }
    .btn {
      padding: 16px 36px; border: none; border-radius: 999px;
      color: #fff; font-size: 18px; font-weight: 600; cursor: pointer;
      background: linear-gradient(90deg, #6366f1, #06b6d4, #6366f1);
      background-size: 200% auto;
      box-shadow: 0 10px 30px rgba(99,102,241,.45);
      transition: background-position .5s ease, transform .25s ease;
    }
    .btn:hover { background-position: right center; transform: translateY(-3px); }
  </style>
</head>
<body>
  <button class="btn">Hover Me</button>
</body>
</html>

A premium-looking call-to-action button with a moving gradient and a subtle lift on hover — built entirely in CSS, no JavaScript required.

How it works

The trick is a wide linear-gradient with background-size: 200%. On hover we shift background-position to animate the colours, and add a small translateY plus a soft shadow for depth.

How to use it

  • Paste the code and replace the button text.
  • Swap the three gradient colours to match your palette.
  • Tune the transition duration for a faster or slower sweep.
Free to use under the MIT license. Built by Ishrafil Khan — need a custom build?

More snippets

Navigation

Pure CSS Hamburger Menu Morph to X
Backgrounds

Immersive Starfield Background Animation
Loaders

CSS Bouncing Ball Loader