Docs
Slide Arrow Button
An arrow button which slides on hover
requires interactionhover
Loading...
Installation
CLI
pnpm dlx shadcn@latest add https://animata.design/r/button/slide-arrow-button.jsonManual
Install dependencies
npm install lucide-reactRun the following command
It will create a new file slide-arrow-button.tsx inside the components/animata/button directory.
mkdir -p components/animata/button && touch components/animata/button/slide-arrow-button.tsxPaste the code
Open the newly created file and paste the following code:
import { ArrowRight } from "lucide-react";
import type React from "react";
interface SlideArrowButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
text?: string;
primaryColor?: string;
}
export default function SlideArrowButton({
text = "Get Started",
primaryColor = "#6f3cff",
className = "",
...props
}: SlideArrowButtonProps) {
return (
<button
className={`group/slide relative rounded-full border border-white bg-white p-2 text-xl font-semibold ${className}`}
{...props}
>
<div
className="absolute left-0 top-0 flex h-full w-11 items-center justify-end rounded-full transition duration-200 ease-in-out group-hover/slide:w-full"
style={{ backgroundColor: primaryColor }}
>
<span className="mr-3 text-white transition duration-200 ease-in-out">
<ArrowRight size={20} />
</span>
</div>
<span className="relative left-4 z-10 whitespace-nowrap px-8 font-semibold text-black transition duration-200 ease-in-out group-hover/slide:-left-3 group-hover/slide:text-white">
{text}
</span>
</button>
);
}Credits
Built by Ayush Gupta