Magnetbutton

Buttons

About

hovering magnetic button

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Magnetbutton to your project and fits it to your theme.

Code

How Magnetbutton is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { MagnetButton } from "@/components/ui/magnetbutton";

export default function MagnetButtonDemo() {
  return (
    <div className="flex items-center justify-center min-h-screen bg-background">
      <MagnetButton>
        <button className="px-8 py-4 rounded-full bg-primary text-primary-foreground font-semibold text-sm tracking-wide">
          Hover me
        </button>
      </MagnetButton>
    </div>
  )
}