Frame Button

Buttons 133

About

A futuristic button with animated corner frames and tactile motion interactions. On hover the corner chevrons expand outward; supports default, secondary and outline variants with an optional glow.

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

Code

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

Usage.tsx

import { FrameButton } from "@/components/ui/frame-button";

const settings = {
  glow: true,
  size: 20,
  offset: 7.5,
  hoverOffset: 7,
};

export default function Demo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };
  return (
    <div className="h-screen w-screen flex items-center justify-center">
      <FrameButton
        glow={s.glow}
        size={s.size}
        offset={s.offset}
        hoverOffset={s.hoverOffset}
      >
        Frame Button
      </FrameButton>
    </div>
  );
}