Can anyone help me figure out how to make a button magnetize the content (arrow) along with it when hovered over by the cursor? I found an example of what I want on this website , but I am struggling to implement it in my own code.
I've searched through forums and tried different solutions, but nothing seems to work. Any assistance would be greatly appreciated!
function btnRun() {
let offset = 70,
cur = false;
document.body.addEventListener('mouseenter', function(e) {
if (e.target.classList.contains('btn') && cur === false) {
cur = {
e: e.target,
x: e.target.getBoundingClientRect().left,
y: e.target.getBoundingClientRect().top
};
}
}, true);
document.addEventListener('mousemove', function(e) {
if (cur !== false) {
let x = (e.clientX - cur.x) - (cur.e.getBoundingClientRect().width / 2),
y = (e.clientY - cur.y) - (cur.e.getBoundingClientRect().height / 2);
cur.e.style.transform = `translate(${x}px,${y}px)`;
if (Math.abs(x) >= offset || Math.abs(y) >= offset) {
cur.e.style.transform = 'translate(0,0)';
cur = false;
}
}
});
}
btnRun();.btn {
position: relative;
width: 69px;
height: 69px;
border-radius: 100%;
border: 0px;
background: #FF625B;
color: #fff;
font-size: 29px;
font-weight: 300;
text-align: center;
text-decoration: none;
padding-top: 15px;
transition: transform .2s linear;
margin-top: 20px;
}
.intro {
position: relative;
display: flex;
width: 100%;
height: auto;
background: #447EF0;
}
.intro__inner {
position: relative;
display: flex;
width: 100%;
height: auto;
}
.intro__content {
width: 50%;
}
/* More CSS styles here... */
.intro__info h2:last-child {
padding-right: 0px;
}
.intro__h2__one {
order: 1;
}<div class="intro__block__btn">
<p class="intro__text__btn">Sign Up</p>
<a href="#form" class="btn btn-intro">
<span>--></span>
</a>
</div>