Skip to content
Docs
Work Button

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.json

Manual

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.tsx

Paste 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-colors">
      <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-transform 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

Edit this page on GitHub
Toggle SwitchCard Comment