btn-hover-left-flip

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