Animated Button

AnimatedButton is a highly customizable animated button component with shimmer effects, glow, and visual styling options.

Installation

npx shadcn@latest add @scrollxui/animated-button

Usage

import { AnimatedButton } from '@/components/ui/animated-button';

<AnimatedButton
  className='bg-green-500 text-white'
  variant='default'
  size='default'
  glow={true}
  textEffect='normal'
  uppercase={true}
  rounded='custom'
  asChild={false}
  hideAnimations={false}
  shimmerColor='#39FF14'
  shimmerSize='0.15em'
  shimmerDuration='3s'
  borderRadius='100px'
  background='rgba(0, 0, 0, 1)'
>
  ScrollX UI
</AnimatedButton>

API Reference

Animated Button

AnimatedButton is a customizable button component with animation, shimmer, and visual styling options.

Props

Property	Type	Default	Description
`variant`	"default" \| "destructive" \| "outline-solid" \| "secondary" \| "ghost" \| "link" \| "success" \| "warning" \| "info" \| "dark" \| "light" \| "gradient" \| "glass"	`"default"`	Controls the visual style of the button.
`size`	"sm" \| "default" \| "lg" \| "icon"	`"default"`	Adjusts the button size.
`glow`	boolean	`false`	Enables glowing animation around the button.
`textEffect`	"normal" \| "shimmer" \| "gradient" \| "glitch" \| string	`"normal"`	Applies a text animation or effect.
`uppercase`	boolean	`false`	Renders button text in uppercase.
`rounded`	"none" \| "sm" \| "md" \| "lg" \| "xl" \| "full" \| "custom"	`"md"`	Controls border radius style.
`borderRadius`	string	`—`	Custom border radius. Applies only when rounded = 'custom'.
`background`	string	`—`	Custom background color or gradient.
`shimmerColor`	string	`—`	Color used in shimmer effect (e.g., '#39FF14').
`shimmerSize`	string	`"0.15em"`	Size/thickness of the shimmer effect.
`shimmerDuration`	string	`"3s"`	Duration of shimmer animation.
`asChild`	boolean	`false`	Render the button as a child component using Slot.
`hideAnimations`	boolean	`false`	Disables all visual animations when true.
`className`	string	`undefined`	Additional custom class names for styling.
`...props`	HTMLButtonElement attributes	`—`	All standard HTML button attributes and events.