btn-animated-gradient

1'use client';
2import { useRef, useState } from 'react';
3 
4const ButtonAnimatedGradient = () => {
5  const divRef = useRef<HTMLButtonElement>(null);
6  const [isFocused, setIsFocused] = useState(false);
7  const [position, setPosition] = useState({ x: 0, y: 0 });
8  const [opacity, setOpacity] = useState(0);
9 
10  const handleMouseMove = (e: React.MouseEvent<HTMLButtonElement>) => {
11    if (!divRef.current || isFocused) return;
12 
13    const div = divRef.current;
14    const rect = div.getBoundingClientRect();
15 
16    setPosition({ x: e.clientX - rect.left, y: e.clientY - rect.top });
17  };
18 
19  const handleFocus = () => {
20    setIsFocused(true);
21    setOpacity(1);
22  };
23 
24  const handleBlur = () => {
25    setIsFocused(false);
26    setOpacity(0);
27  };
28 
29  const handleMouseEnter = () => {
30    setOpacity(1);
31  };
32 
33  const handleMouseLeave = () => {
34    setOpacity(0);
35  };
36 
37  return (
38    <>
39      <button
40        ref={divRef}
41        onMouseMove={handleMouseMove}
42        onFocus={handleFocus}
43        onBlur={handleBlur}
44        onMouseEnter={handleMouseEnter}
45        onMouseLeave={handleMouseLeave}
46        className='relative inline-flex w-fit mx-auto h-12 items-center justify-center overflow-hidden rounded-md border-2 dark:border-[#656fe2] border-[#c0c6fc] bg-linear-to-r dark:from-[#070e41] dark:to-[#141d57] from-[#9ba3fdfd] to-[#3d5af1] px-6 font-medium text-white  shadow-2xl transition-colors focus:outline-hidden focus:ring-2 focus:ring-neutral-400 focus:ring-offset-2 focus:ring-offset-neutral-50'
47      >
48        <div
49          className='pointer-events-none absolute -inset-px opacity-0 transition duration-300'
50          style={{
51            opacity,
52            background: `radial-gradient(100px circle at ${position.x}px ${position.y}px, #656fe288, #00000026)`,
53          }}
54        />
55        <span className='relative z-20'>Click Me</span>
56      </button>
57    </>
58  );
59};
60 
61export default ButtonAnimatedGradient;