Duolingo's button
It will create a new file duolingo.tsx inside the components/animata/button directory.
duolingo.tsx
components/animata/button
mkdir -p components/animata/button && touch components/animata/button/duolingo.tsx
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> ); }
Built by hari