button-hover-right

1'use client';
2 
3const ButtonHoverRight = () => {
4  return (
5    <>
6      <button className='group relative inline-flex h-12 w-12 items-center justify-center overflow-hidden rounded-full bg-linear-to-r dark:from-[#070e41] dark:to-[#263381] from-[#c0c7ff] to-[#4c64ff]  font-medium text-neutral-200 border-2 border-[#656fe2] transition-all duration-300 hover:w-32'>
7        <div className='inline-flex whitespace-nowrap opacity-0 transition-all duration-200 group-hover:-translate-x-3 group-hover:opacity-100'>
8          Visit
9        </div>
10        <div className='absolute right-3.5'>
11          <svg
12            width='15'
13            height='15'
14            viewBox='0 0 15 15'
15            fill='none'
16            xmlns='http://www.w3.org/2000/svg'
17            className='h-5 w-5'
18          >
19            <path
20              d='M8.14645 3.14645C8.34171 2.95118 8.65829 2.95118 8.85355 3.14645L12.8536 7.14645C13.0488 7.34171 13.0488 7.65829 12.8536 7.85355L8.85355 11.8536C8.65829 12.0488 8.34171 12.0488 8.14645 11.8536C7.95118 11.6583 7.95118 11.3417 8.14645 11.1464L11.2929 8H2.5C2.22386 8 2 7.77614 2 7.5C2 7.22386 2.22386 7 2.5 7H11.2929L8.14645 3.85355C7.95118 3.65829 7.95118 3.34171 8.14645 3.14645Z'
21              fill='currentColor'
22              fillRule='evenodd'
23              clipRule='evenodd'
24            ></path>
25          </svg>
26        </div>
27      </button>
28    </>
29  );
30};
31 
32export default ButtonHoverRight;