Docs
Duolingo
Duolingo's button
Installation
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.tsx
Paste 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 transform-gpu 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-none transition-all duration-200 hover:brightness-110 active:border-b-0 active:border-t-4 active:bg-none disabled:cursor-auto"
role="button"
>
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