Docs
Work Button
A button that has hover effect.
requires interactionhover
Loading...
Installation
CLI
pnpm dlx shadcn@latest add https://animata.design/r/button/work-button.jsonManual
Run the following command
It will create a new file called work-button.tsx inside the components/animata/button directory.
mkdir -p components/animata/button && touch components/animata/button/work-button.tsxPaste the code
Open the newly created file and paste the following code:
export default function WorkButton() {
return (
<button className="group/work relative overflow-hidden rounded-full bg-purple-950 px-14 py-4 text-lg transition">
<span className="absolute bottom-0 left-0 h-48 w-full origin-bottom translate-y-full transform overflow-hidden rounded-full bg-white/15 transition duration-300 ease-out group-hover/work:translate-y-14"></span>
<span className="font-semibold text-purple-200">Work with us</span>
</button>
);
}Credits
Built by Laxmi Lamichhane