Stop Rebuilding UI

Shadcn.io is not affiliated with official shadcn/ui

Previous: Gradient Button
Next: Highlight Button

Gravity Button

Button where the text subtly pulls toward your cursor like gravity for React.

Physics-based interaction. Move your cursor near this button and watch the text lean toward it, pulled by an invisible gravitational force. It's subtle but delightful—the kind of detail that makes users go "wait, did that just...?" Perfect for creative portfolios, agency sites, or anywhere you want to show attention to craft. The effect is gentle enough to not interfere with clicking. Feels alive.

Gravity Button preview

Loading...
Scroll to load preview

Installation

Install
Pro button

Magnetic Button

Particle attraction

Tilt Button

3D tilt on hover

Spotlight Button

Cursor-following light

Elastic Button

Rubber band stretch

Morph Button

Shape morphing

Bounce Button

Elastic click bounce

FAQ

Gradient Button

Button with a flowing gradient background that shifts colors on hover for React.

Highlight Button

Button with a highlight bar that slides across on hover for React.