Motion Button

An animated button with corner brackets and a sliding color panel that reacts to hover and tap/click, useful as an eye-catching call-to-action.

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

import { MotionBtn } from "@/components/ui/motion-btn";

export default function MotionBtnPreview() {
  return (
    <div className="flex h-[calc(100vh-64px)] w-full items-center justify-center">
      <MotionBtn>Join The Horde</MotionBtn>
    </div>
  );
}