Docs
Get started button
A button that changes colors on hover
requires interactionhover
Loading...
Installation
CLI
pnpm dlx shadcn@latest add https://animata.design/r/button/get-started-button.jsonManual
Install dependencies
npm install lucide-reactRun the following command
It will create a new file called get-started-button.tsx inside the components/animata/button directory.
mkdir -p components/animata/button && touch components/animata/button/get-started-button.tsxPaste the code
Open the newly created file and paste the following code:
import { ArrowRight } from "lucide-react";
import { cn } from "@/lib/utils";
interface IGetStartedButtonProps {
text: string;
className?: string;
}
export default function GetStartedButton({
text = "Get started",
className,
}: IGetStartedButtonProps) {
return (
<div className="min-h-12 w-48">
<button
className={cn(
"group/start flex h-12 w-40 items-center justify-center gap-3 rounded-lg bg-amber-100 p-2 font-bold transition-colors duration-100 ease-in-out hover:bg-orange-600",
className,
)}
>
<span
className={cn(
"text-orange-600 transition-colors duration-100 ease-in-out group-hover/start:text-amber-100",
)}
>
{text}
</span>
<div
className={cn(
"relative flex h-7 w-7 items-center justify-center overflow-hidden rounded-full transition-transform duration-100",
"bg-orange-600 group-hover/start:bg-amber-100",
)}
>
<div className="absolute left-0 flex h-7 w-14 -translate-x-1/2 items-center justify-center transition duration-200 ease-in-out group-hover/start:translate-x-0">
<ArrowRight
size={16}
className={cn(
"size-7 transform p-1 text-orange-600 opacity-0 group-hover/start:opacity-100",
)}
/>
<ArrowRight
size={16}
className={cn(
"size-7 transform p-1 text-amber-100 opacity-100 transition-transform duration-300 ease-in-out group-hover/start:opacity-0",
)}
/>
</div>
</div>
</button>
</div>
);
}Credits
Built by Chiranjibi Ranabhat