Docs
Duolingo
Duolingo's button
Loading...
Installation
CLI
pnpm dlx shadcn@latest add https://animata.design/r/button/duolingo.jsonManual
Run the following command
It will create a new file duolingo.tsx inside the components/animata/button directory.
mkdir -p components/animata/button && touch components/animata/button/duolingo.tsxPaste the code
Open the newly created file and paste the following code:
export default function Duolingo() {
return (
<button className="box-border inline-block h-11 cursor-pointer touch-manipulation whitespace-nowrap rounded-lg border-b-4 border-solid border-transparent bg-sky-600 px-4 py-3 text-center text-sm font-bold uppercase leading-5 tracking-wider text-white outline-hidden transition duration-200 hover:brightness-110 active:border-b-0 active:border-t-4 active:bg-none disabled:cursor-auto">
Duolingo
<span className="absolute inset-0 -z-10 rounded-lg border-b-4 border-solid border-transparent bg-sky-500" />
</button>
);
}Credits
Built by hari