Todos os componentes

Button Hover Left Flip

Button Hover Left Flip é um componente de sobreposição para React e Tailwind CSS, da biblioteca UI Layouts, com licença MIT. Copia e cola no teu projeto.

UI Layouts MIT overlays

O que é

Button Hover Left Flip é um componente de sobreposição para React e Tailwind CSS, da biblioteca UI Layouts, com licença MIT. Copia e cola no teu projeto.

Como usar

Abre o componente no catálogo, carrega em copiar, e cola no teu projeto. O prompt copiado leva o código e as regras para o teu agente o reproduzir sem alterar nada.

Abrir no catálogo

Cinco cópias grátis por mês. Sem cartão.

Não precisa de pacotes além do que o projeto já tem

Licença

Este componente vem de UI Layouts e é redistribuído sob a licença MIT, que permite uso comercial. O aviso de copyright viaja com o código.

Button Hover Left Flip

./registry/components/button/btn-hover-left-flip.tsx
'use client';

const ButtonHoverLeftFlip = () => {
  return (
    <>
      <button className='group relative inline-flex h-12 items-center justify-center overflow-hidden rounded-md border-2 dark:border-[#656fe2] border-[#394481] font-medium'>
        <div className='inline-flex h-12 translate-x-0 items-center justify-center bg-linear-to-r dark:from-[#070e41] dark:to-[#263381] from-[#f5f6f8] to-[#fafbff]  px-6 dark:text-white text-[#394481] transition group-hover:-translate-x-[150%]'>
          Hover me
        </div>
        <div className='absolute inline-flex h-12 w-full translate-x-full items-center justify-center bg-[#394481] dark:bg-[#656fe2] px-6 text-white transition duration-300 group-hover:translate-x-0'>
          Hover me
        </div>
      </button>
    </>
  );
};

export default ButtonHoverLeftFlip;

Componentes parecidos