Arrow Fill Button

Buttons 940

About

Pill button with an orange border whose circular fill expands to cover the button on hover as the label recolors and an arrow slides in.

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

Code

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

Usage.tsx

"use client";

import ArrowFillButton from "@/components/ui/arrow-fill-button";

export default function ArrowFillButtonDemo() {
  return (
    <div className="flex min-h-64 w-full items-center justify-center p-12">
      <ArrowFillButton
        btnText="Hover me"
        href="https://vault.hyperiux.com"
        onClick={(event) => event.preventDefault()}
      />
    </div>
  );
}