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