btn-cross-arrow

1const ButtonCrossArrow = () => {
2  return (
3    <>
4      <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'>
5        <span className='pl-4'>Contact me</span>
6        <div className='relative h-9 w-9 overflow-hidden  dark:bg-white bg-black rounded-full mr-1'>
7          <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 '>
8            <svg
9              width='15'
10              height='15'
11              viewBox='0 0 15 15'
12              fill='none'
13              xmlns='http://www.w3.org/2000/svg'
14              className='h-5 w-5 dark:fill-black fill-white '
15            >
16              <path
17                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'
18                fillRule='evenodd'
19                clipRule='evenodd'
20              ></path>
21            </svg>
22            <svg
23              width='15'
24              height='15'
25              viewBox='0 0 15 15'
26              fill='none'
27              xmlns='http://www.w3.org/2000/svg'
28              className='h-5 w-5 mb-1 -translate-x-4 dark:fill-black fill-white'
29            >
30              <path
31                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'
32                fillRule='evenodd'
33                clipRule='evenodd'
34              ></path>
35            </svg>
36          </div>
37        </div>
38      </button>
39    </>
40  );
41};
42
43export default ButtonCrossArrow;