DocsComponentsBlog
Star us
Docs

Algolia White Button

Algolia's white button

Installation

Run the following command

It will create a new file algolia-white-button.tsx inside the components/animata/button directory.

mkdir -p components/animata/button && touch components/animata/button/algolia-white-button.tsx

Paste the code

Open the newly created file and paste the following code:

export default function AlgoliaWhiteButton() {
  return (
    <button
      className="inline-flex h-12 cursor-pointer touch-manipulation items-center justify-center overflow-hidden whitespace-nowrap rounded border-0 bg-[#FCFCFD] px-4 font-mono leading-none text-slate-800 no-underline shadow-[rgba(45,35,66,0.4)_0_2px_4px,rgba(45,35,66,0.3)_0_7px_13px_-3px,#D6D6E7_0_-3px_0_inset] transition-all duration-150 ease-in-out hover:-translate-y-0.5 hover:shadow-[rgba(45,35,66,0.4)_0_4px_8px,rgba(45,35,66,0.3)_0_7px_13px_-3px,#D6D6E7_0_-3px_0_inset] focus:shadow-[#D6D6E7_0_0_0_1.5px_inset,rgba(45,35,66,0.4)_0_2px_4px,rgba(45,35,66,0.3)_0_7px_13px_-3px,#D6D6E7_0_-3px_0_inset] active:translate-y-0.5 active:shadow-[#D6D6E7_0_3px_7px_inset]"
      role="button"
    >
      Aloglia White
    </button>
  );
}

Credits

Built by hari

Edit this page on GitHub
Algolia Blue ButtonDuolingo