my/ui

Command Palette

Search for a command to run...

All components

Press Shadow Button

buttons

Ui-Layouts component.

responsive · 350px

Install

Same command in any shadcn project — React (Vite/CRA), Next.js, Remix, Astro, and more:

$npx shadcn@latest add https://your-domain/r/btn-click-down.json

Usage

import Cmp from "@/registry/ui-layouts/btn-click-down";

export default function Demo() {
  return <Cmp />;
}

Component source

'use client';

const ButtonClickDown = () => {
  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 dark:[box-shadow:5px_5px_rgb(76_100_255)] [box-shadow:5px_5px_rgb(38_51_129)] active:translate-x-[3px] active:translate-y-[3px] active:[box-shadow:0px_0px_rgb(38_51_129)] dark:active:[box-shadow:0px_0px_rgb(76_100_255)]'>
        Contact me
      </button>
    </>
  );
};

export default ButtonClickDown;

Source: Ui-Layouts