Marquee Hover Button

Buttons 28

About

A reusable React + TypeScript button component that replicates a marquee-on-hover animation using Tailwind CSS and Framer Motion.

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

Code

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

Usage.tsx

import { Button23 }  from "@/components/ui/marquee-hover-button";

export default function DemoOne() {
  return (
    <div className="flex min-h-screen items-center justify-center bg-background text-foreground p-6">
      <div className="space-x-4">
        <Button23 label="Button" />
        <Button23 label="Primary" className="border-neutral-300 dark:border-neutral-700" />
        <Button23 label="Disabled" disabled />
      </div>
    </div>
  );
}