btn-hover-top-slowflip

1'use client';
2 
3const ButtonHoverTopSlowFlip = () => {
4  return (
5    <>
6      <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'>
7        <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%]'>
8          Hover me
9        </div>
10        <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'>
11          <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>
12          <span className='z-10'>Hover me</span>
13        </div>
14      </button>
15    </>
16  );
17};
18 
19export default ButtonHoverTopSlowFlip;