Morphing Arrow Button

A directional button that smoothly morphs on hover: - Starts as a circular icon - Expands outward in the given direction (left or right) - Adds a subtle animated line and arrow shift for a modern touch Ideal for carousels, sliders, or navigation UIs where you want subtle motion without being intrusive.

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

import MorphingArrowButton from "@/components/ui/morphing-arrow-button";

export default function Demo() {
  return (
    <div className="h-screen w-screen flex items-center justify-center gap-10 p-4">
      <MorphingArrowButton direction="left" />
      <MorphingArrowButton direction="right" />
    </div>
  );
}