Button Components

12 ultra-premium button variants with GSAP animations, 3D effects, and complex micro-storytelling.

12 Variants

CLI Install

Magnetic Button

A button that playfully follows your cursor with elastic bounce-back. Features text lag for a juicy feel.

Installation

$npx shadcn@latest add https://aftershade.pages.dev/registry/magnetic-button.json

Liquid Fill

Directional liquid fill effect based on mouse entry. Features on-click ripples and text inversion.

Installation

$npx shadcn@latest add https://aftershade.pages.dev/registry/liquid-fill-button.json

Premium Apple

Subtle shine sweep on hover with physical press animation and internal scaling. Pure luxury.

Installation

$npx shadcn@latest add https://aftershade.pages.dev/registry/premium-button.json

3D Tilt Parallax

Advanced 3D rotation based on mouse position with dynamic shadow movement for real depth.

Installation

$npx shadcn@latest add https://aftershade.pages.dev/registry/tilt-button.json

Morphing Shape

Organic blob-like morphing using border-radius animations and elastic squash effects.

Installation

$npx shadcn@latest add https://aftershade.pages.dev/registry/morphing-button.json

Progress Action

Transforms from button to loader to success state. Perfect for form submissions.

Installation

$npx shadcn@latest add https://aftershade.pages.dev/registry/progress-button.json

Gradient Flow

Animate background gradients that speed up on hover. Eye-catching and vibrant.

Installation

$npx shadcn@latest add https://aftershade.pages.dev/registry/gradient-flow-button.json

Bubble Particles

Pops out colorful particles on hover and click for a fun, interactive user experience.

Installation

$npx shadcn@latest add https://aftershade.pages.dev/registry/bubble-button.json

Smart Magnetic

Combines magnetic attraction with individual letter reactions and stagger animations.

Installation

$npx shadcn@latest add https://aftershade.pages.dev/registry/smart-magnetic-button.json

Send Mail Micro-interaction

A premium storytelling interaction. Rises a mailbox, sends an envelope, and transitions to a success state.

Installation

$npx shadcn@latest add https://aftershade.pages.dev/registry/send-mail-button.json

PDF Generation Micro-interaction

A complex sequence where pages stack into a box, morph into a PDF, and 'download' downward.

Installation

$npx shadcn@latest add https://aftershade.pages.dev/registry/generate-pdf-button.json

Copy Page Duplication

A visual metaphor for duplication where a second page slides out and stacks behind the original.

Installation

$npx shadcn@latest add https://aftershade.pages.dev/registry/copy-duplication-button.json

Advanced Animation Stack

GSAP Core

The powerhouse behind every interaction here. Handles high-performance transforms and timelines.

npm install gsap

Lucide Icons

Clean, lightweight icons used for progress states and actions.

npm install lucide-react