React Button Components

50+ animated button components for React. Shimmer, glow, magnetic, confetti, 3D effects. Copy-paste into your Next.js project.

Every button on your site is an opportunity. Most developers use the same flat rectangle with a hover:bg-gray-100. Users have seen it a million times. Their brain filters it out like banner ads.

These buttons don't just work—they feel good to click. Shimmer effects that catch the eye. Magnetic particles that follow your cursor. Confetti explosions on success. 50+ components, each designed to make interactions memorable.

Pick an Effect

Glow & Shimmer

Light-based effects that make buttons feel premium. Subtle animations that catch the eye without overwhelming.

Shimmer Button

Flowing shimmer like liquid metal

Shine Button

Diagonal light sweep on hover

Glow Border

Rotating gradient glow

Neon Button

Pulsing neon glow effect

Pulse Button

Pulsing attention ring

Spotlight Button

Cursor-following light

Fill & Reveal

Buttons that transform on interaction. Color fills, reveals, and satisfying visual feedback.

Liquid Button

Fluid fill rising on hover

Outline Fill

Fill from bottom on hover

Swipe Button

Color swipe across surface

Ghost Button

Transparent with fill on hover

Slide Reveal

Sliding content reveal

Text Reveal

Text reveal animation

3D & Depth

Buttons that use the third dimension. Tilt, flip, press effects that make interactions feel physical.

Flip Button

3D flip with front/back faces

Tilt Button

3D tilt following cursor

Depth Button

Realistic 3D press effect

Bounce Button

Bouncy spring animation

Elastic Button

Stretchy elastic feel

Squeeze Button

Squish on press

Text Effects

Typography-focused animations. Scramble, typewriter, glitch—buttons where the text is the star.

Typewriter Button

Text types out letter by letter

Scramble Button

Text scrambles through characters

Glitch Button

RGB split glitch effect

Blur Button

Text sharpens into focus

Marquee Button

Scrolling ticker text

Scatter Button

Letters explode apart

Borders & Outlines

Animated border effects. Traces, gradients, and decorative accents.

Border Trace

Animated border drawing

Ring Expand

Expanding ring on click

Underline Button

Animated underline

Corner Accent

Animated corner decorations

Stitch Button

Stitched border effect

Highlight Button

Sliding highlight bar

Interactive & Physics

Buttons that respond to your cursor. Magnetic fields, gravity, particles that follow interaction.

Magnetic Button

Particles attract on hover

Gravity Button

Text pulls toward cursor

Ripple Button

Material Design ripple

Shockwave Button

Expanding shockwave ring

Confetti Button

Confetti explosion on click

Sparkle Button

Floating sparkle particles

State & Feedback

Buttons for specific states. Loading spinners, success confirmations, error feedback.

Loading Button

Built-in loading spinner

Success Button

Checkmark success animation

Shake Button

Error shake feedback

Arrow Button

Arrow slides in on hover

Expand Button

Grows wider revealing icon

Counter Button

Animated rolling number

Utility Buttons

Essential interactive patterns. Copy, theme toggles, inputs—polished versions of common needs.

Copy Button

Clipboard copy with feedback

Theme Toggle

Light/dark with View Transitions

Input Button

Expands into text input

GitHub Stars

Live repo star count

Icon Button

Animated icon with particles

Morph Button

Morphs between states

Style Variants

Different visual styles. Gradients, patterns, special effects.

Gradient Button

Animated gradient background

Split Button

Splits apart revealing glow

Using Components

Install with the CLI:

npx shadcn@latest add https://shadcn.io/r/shimmer-button.json

Or copy from the component page directly into your project. Each component is self-contained—no external dependencies beyond what's listed.

Most buttons use Tailwind CSS for styling. Some use Motion (Framer Motion) for complex animations. Dependencies are listed on each component page.