my/ui

Command Palette

Search for a command to run...

All components

Skew Text Flip 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-text-change.json

Usage

import Cmp from "@/registry/ui-layouts/btn-text-change";

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

Component source

'use client';

const ButtonTextChange = () => {
  return (
    <>
      <button className='group relative h-12 rounded-full border-2 dark:border-[#656fe2] border-[#394481] bg-linear-to-r dark:from-[#070e41] dark:to-[#263381] from-[#f7f8ff] to-[#ffffff] px-5 dark:text-white text-neutral-950'>
        <span className='relative inline-flex overflow-hidden'>
          <div className='translate-y-0 skew-y-0 transition duration-500 group-hover:-translate-y-[110%] group-hover:skew-y-12'>
            Contact me
          </div>
          <div className='absolute translate-y-[114%] skew-y-12 transition duration-500 group-hover:translate-y-0 group-hover:skew-y-0'>
            Contact me
          </div>
        </span>
      </button>
    </>
  );
};

export default ButtonTextChange;

Source: Ui-Layouts