magnetic button vanilla js

index.html

<div class='container' onmousemove='MagneticBtn(event)'>
  <button class='btn'>hello</button>
</div>

magnetic-button-vanilla-js.markdown

magnetic button vanilla js

A Pen by abdelghanyMh on CodePen.

License.

script.js

const btn = document.querySelector('.btn')

// https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
const { x, y, bottom, right } = btn.getBoundingClientRect() 


const btnCenter = { cx: (x + right) / 2, cy: (y + bottom) / 2 }

const calculateDistance = (x1, y1, x2, y2) => { return Math.hypot(x1 - x2, y1 - y2); };

const MagneticBtn = (e) => {
        const { pageX: cursorX, pageY: cursorY } = e
        const triggerArea = 400;
        
        // console.log(calculateDistance(btnCenter.cx, btnCenter.cy, cursorX, cursorY) )
        
        if (calculateDistance(btnCenter.cx, btnCenter.cy, cursorX, cursorY) < triggerArea) {
            btn.style.transition = 'all 0.3s'
            btn.style.transform = "translate(" + (cursorX - btnCenter.cx) * .2 + "px," + (cursorY - btnCenter.cy) * .2 + "px)";
            return
        }
        btn.style.transform = `translate(0)`
    }

style.css

:root{
  --transition: all 0.3s ;
  --colors-accent-400: #4299e1;
  --border-radius: 4px;
  --colors-white: #ffffff;
}
.container{
  display:flex;
  justify-content:center;
  align-items:center;
  width: 100vw;
  height:100vh
}
.btn{
  cursor: pointer;
  color: var(--colors-accent-400);
  background: none;
  text-decoration: none;
  font-size: 2rem;

  border: 2px solid var(--colors-accent-400);
  border-radius: var(--border-radius);

  width: 172.8px;
  margin-top: 3rem;
  padding: 1rem;

  -webkit-transition: var(--transition);
  transition: var(--transition);

  overflow: hidden;
  position: relative;
}
.btn:hover {
  background-color: var(--colors-accent-400);
  color: var(--colors-white);
}