Magnetic Button

1function MagneticButton(){
2  const [p,setP]=React.useState({x:0,y:0});
3  return (
4    <button
5      onMouseMove={e=>{const r=e.currentTarget.getBoundingClientRect();
6        setP({x:(e.clientX-r.left-r.width/2)*.3,y:(e.clientY-r.top-r.height/2)*.3})}}
7      onMouseLeave={()=>setP({x:0,y:0})}
8      style={{transform:`translate(${p.x}px,${p.y}px)`,transition:"transform .15s ease-out",
9        padding:"14px 32px",borderRadius:14,border:0,cursor:"pointer",
10        background:"linear-gradient(120deg,#f5a623,#ff6b4a)",color:"#0a0a0f",font:"600 16px system-ui"}}>
11      Zieh mich
12    </button>
13  );
14}