Make your AI a shadcn expert
Previous: Ripple Button
Next: Scramble Button

Scatter Button

Button where letters scatter apart on hover and reassemble on leave for React.

Scatter Button preview

Scroll to load preview

Watch your words explode. Hover and each letter flies off in a random direction—a controlled chaos of typography. Leave and they magnetically snap back together, reforming your CTA. It's dramatic, it's unexpected, and it demands attention. The scatter feels explosive but the reassembly feels satisfying—like order from chaos. Perfect for bold brands, creative agencies, or any button that should feel energetic and unconventional. Not for the faint of heart.

Install with AI

If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this button for you — no copy-paste, no CLI:

use shadcnio to install the scatter-button button into my project

Typewriter Button

Typing text effect

Text Reveal Button

Neon text reveal

Glitch Button

Cyberpunk glitch

Confetti Button

Celebration particles

Flip Button

3D flip animation

Bounce Button

Elastic click bounce

FAQ

Was this page helpful?

Sign in to leave feedback.

Ripple Button

Material Design ripple effect button with expanding circles from click point for React applications.

Scramble Button

Button with text that scrambles through random characters on hover for React.