btn-cross-arrow

1'use client';
2 
3const ButtonCrossArrow = () => {
4  return (
5    <>
6      <button className='group relative flex h-12 w-[170px]  items-center justify-between border-2 dark:border-[#656fe2] border-[#394481] rounded-full  bg-linear-to-r dark:from-[#070e41] dark:to-[#263381] from-[#f7f8ff] to-[#ffffff] font-medium dark:text-neutral-200 text-black'>
7        <span className='pl-4'>Contact me</span>
8        <div className='relative h-9 w-9 overflow-hidden  dark:bg-white bg-black rounded-full mr-1'>
9          <div className='absolute top-[0.7em] left-[-0.1em] grid place-content-center transition-all w-full h-full duration-200 group-hover:-translate-y-5 group-hover:translate-x-4 '>
10            <svg
11              width='15'
12              height='15'
13              viewBox='0 0 15 15'
14              fill='none'
15              xmlns='http://www.w3.org/2000/svg'
16              className='h-5 w-5 dark:fill-black fill-white '
17            >
18              <path
19                d='M3.64645 11.3536C3.45118 11.1583 3.45118 10.8417 3.64645 10.6465L10.2929 4L6 4C5.72386 4 5.5 3.77614 5.5 3.5C5.5 3.22386 5.72386 3 6 3L11.5 3C11.6326 3 11.7598 3.05268 11.8536 3.14645C11.9473 3.24022 12 3.36739 12 3.5L12 9.00001C12 9.27615 11.7761 9.50001 11.5 9.50001C11.2239 9.50001 11 9.27615 11 9.00001V4.70711L4.35355 11.3536C4.15829 11.5488 3.84171 11.5488 3.64645 11.3536Z'
20                fillRule='evenodd'
21                clipRule='evenodd'
22              ></path>
23            </svg>
24            <svg
25              width='15'
26              height='15'
27              viewBox='0 0 15 15'
28              fill='none'
29              xmlns='http://www.w3.org/2000/svg'
30              className='h-5 w-5 mb-1 -translate-x-4 dark:fill-black fill-white'
31            >
32              <path
33                d='M3.64645 11.3536C3.45118 11.1583 3.45118 10.8417 3.64645 10.6465L10.2929 4L6 4C5.72386 4 5.5 3.77614 5.5 3.5C5.5 3.22386 5.72386 3 6 3L11.5 3C11.6326 3 11.7598 3.05268 11.8536 3.14645C11.9473 3.24022 12 3.36739 12 3.5L12 9.00001C12 9.27615 11.7761 9.50001 11.5 9.50001C11.2239 9.50001 11 9.27615 11 9.00001V4.70711L4.35355 11.3536C4.15829 11.5488 3.84171 11.5488 3.64645 11.3536Z'
34                fillRule='evenodd'
35                clipRule='evenodd'
36              ></path>
37            </svg>
38          </div>
39        </div>
40      </button>
41    </>
42  );
43};
44 
45export default ButtonCrossArrow;