Animated Gradient Button

A production-ready animated gradient button that transitions between gradient states on hover. Uses CSS animations for zero-JS performance. Fully accessible, keyboard-navigable, and supports reduced motion.

ReactNext.jsServer CompatibleReactCSS

Loading preview…

CLI Installation

Add to your project using the shadcn CLI:

npx shadcn@latest add @mridha/animated-gradient-button

Registry endpoint: https://ui.mridha.net/r/animated-gradient-button.json

Manual Installation

1. Copy the component file

Copy the source from the Code tab above into components/ui/animated-gradient-button.tsx

2. Import the component

import { AnimatedGradientButton } from "@/components/ui/animated-gradient-button";

3. Use it in a page

export default function Page() {
  return (
    <main>
      <AnimatedGradientButton />
    </main>
  );
}

Props

Prop	Type	Default	Description
`children*`	`ReactNode`	—	Button label or content
`variant`	`"default" \| "outline" \| "ghost"`	`"default"`	Visual style variant
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Button size
`asChild`	`boolean`	`false`	Render as a child element using Radix Slot
`className`	`string`	—	Additional CSS classes

Accessibility

Uses native <button> element for full keyboard and screen-reader support.
Focus ring is visible and meets WCAG 2.1 AA contrast requirements.
Animation is disabled when prefers-reduced-motion is active.

Performance

Uses CSS @keyframes — no JavaScript animation runtime required.
Zero bundle size impact beyond the component itself.