Magnetic Button

A magnetic button that is pulled toward the cursor on hover and springs back on leave.

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use

import { Button20 } from "@/components/beste/component/button20";
import { ArrowRight } from "lucide-react";

// Renders a <Link> when href is set, otherwise a <button> using onClick.
<Button20 label="Let's talk" href="/contact" />

<Button20
  label="See the work"
  icon={ArrowRight}   // optional leading icon
  tone="primary"      // "dark" (default) | "primary"
  strength={0.4}      // cursor pull, 0–1 (default 0.25)
  onClick={() => console.log("see the work")}
/>