Slide Arrow Button

arrow x slide

Button with arrow that slides on hover. From Animata.

buttonarrowslideanimata

Code

button-slide-arrow.tsx

import { ArrowRight } from "lucide-react";

export function SlideArrowButton({ children }: { children: React.ReactNode }) {
  return (
    <button className="group inline-flex items-center gap-3 rounded-full border border-border bg-surface py-2 pl-5 pr-2 text-sm font-medium">
      <span className="transition-transform duration-300 group-hover:-translate-x-1">{children}</span>
      <span className="grid size-8 place-items-center rounded-full bg-brand text-brand-foreground transition-transform duration-300 group-hover:translate-x-1">
        <ArrowRight className="size-4" />
      </span>
    </button>
  );
}

Icons: npm i lucide-react

Use it in another build

Paste the code into a component file, keep your project tokens (background, brand, radius) and it themes itself. Or tell Claude Code: “add the Slide Arrow Button component and wire it to my accent.”