Animated Button

A modern, animated, and accessible call-to-action button featuring spinning conic gradients, smooth transitions, and comprehensive customization. Ideal for landing pages, feature cards, or anywhere you want to draw attention with eye-catching interaction.

Live Preview

Installation

You can install the AnimatedButton component with the following CLI command, or copy the implementation manually:

typescript-icon
1npx shadcn@latest add http://localhost:3000/r/animated-button.json

Import

To use the AnimatedButton component, import it in your code:

typescript-icon
1import AnimatedButton from '@/components/AnimatedButton';

Props

The AnimatedButton component accepts the following props:

PropTypeDefaultDescriptionRequired
childrenstring-The text displayed inside the button.Yes
onClick() => void-Callback fired when the button is clicked.Yes
classNamestring-Additional utility classes for customizing the button styling.No
type'button' | 'submit' | 'reset''button'Type of button.No
ariaLabelstring-Aria-label for accessibility; defaults to the button text.No
disabledbooleanfalseWhether the button is disabled.No

Example usage

Basic usage

typescript-icon
1<AnimatedButton onClick={() => alert('Hello!')}>Click me</AnimatedButton>

Custom color/background

typescript-icon
1<AnimatedButton className="bg-sky-100 dark:bg-slate-800" onClick={() => alert('Styled!')}>Custom</AnimatedButton>

Disabled button

typescript-icon
1<AnimatedButton disabled onClick={() => {}}>Can't Click</AnimatedButton>

Features

  • Animated: Multiple spinning gradients for a striking visual effect.
  • Accessible: aria-label and disabled for improved accessibility.
  • Customizable: Accepts Tailwind utility class overrides via className.
  • Type safe: Strict React & TypeScript prop types.
  • Distinctive: Modern, vibrant appearance for impactful call-to-actions in any theme.

Customization

  • Gradient colors: Tweak the conic gradient stops in the button implementation for custom accent colors and branding.
  • Size & shape: Edit Tailwind size classes (h-12 w-32, rounded-full, etc) for different form factors.
  • Animation speed: Adjust [animation-duration:2s] utility for slower or faster spins.
  • Inner content: Style the foreground by editing the innermost div (e.g., background, padding, text styles).

Troubleshooting

  • If the conic gradients or animation do not appear, verify your Tailwind config allows arbitrary [background-image:...] and [animation-...] syntax (see Tailwind’s config docs).
  • Make sure to pass a string as children and an onClick function.
  • For best effect, use this button in a prominent spot—otherwise the motion may distract users.