DocsComponentsBlog
Star us
Docs

Work Button

A button that has hover effect.

requires interactionhover

Installation

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 relative overflow-hidden rounded-full bg-purple-950 px-14 py-4 text-lg transition-all">
      <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-all duration-300 ease-out group-hover: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