Animated Button

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

Installation

npx scrollx-ui@latest add 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" \| "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.