btn-hover-down

PreviousNext
Docs
ui-layoutscomponent

Preview

Loading preview…
./registry/components/button/btn-hover-down.tsx
const ButtonHoverDown = () => {
  return (
    <>
      <button className='group relative inline-flex h-12 items-center justify-center overflow-hidden rounded-md  bg-linear-to-r dark:from-[#070e41] dark:to-[#263381] from-[#f6f7ff] to-[#f5f6ff] dark:border-[rgb(76_100_255)] border-2 border-[#263381]  bg-transparent px-6 font-medium dark:text-white text-black transition-all duration-100 [box-shadow:5px_5px_rgb(38_51_129)] dark:[box-shadow:5px_5px_rgb(76_100_255)] hover:translate-x-[3px] hover:translate-y-[3px] hover:[box-shadow:0px_0px_rgb(38_51_129)] dark:hover:[box-shadow:0px_0px_rgb(76_100_255)]'>
        Contact me
      </button>
    </>
  );
};

export default ButtonHoverDown;

Installation

npx shadcn@latest add @ui-layouts/btn-hover-down

Usage

import { BtnHoverDown } from "@/components/btn-hover-down"
<BtnHoverDown />