Todos os componentes

Button Hover Top Slowflip

Button Hover Top Slowflip é 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 Top Slowflip é 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 Top Slowflip

./registry/components/button/btn-hover-top-slowflip.tsx

'use client';

const ButtonHoverTopSlowFlip = () => {
  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-y-0 items-center justify-center px-6  bg-linear-to-r dark:from-[#070e41] dark:to-[#263381] dark:text-white text-black transition duration-500 group-hover:-translate-y-[150%]'>
          Hover me
        </div>
        <div className='absolute inline-flex h-12 w-full translate-y-full items-center justify-center text-neutral-50 transition duration-500 group-hover:translate-y-0'>
          <span className='absolute h-full w-full translate-y-full skew-y-12 scale-y-0 bg-[#394481] dark:bg-[#656fe2] transition duration-500 group-hover:translate-y-0 group-hover:scale-150'></span>
          <span className='z-10'>Hover me</span>
        </div>
      </button>
    </>
  );
};

export default ButtonHoverTopSlowFlip;

Componentes parecidos