При наведении на кнопку, нужно чтобы кнопка магнитилась к курсору и стрелка в кнопке тоже

Question

Есть кнопка, при наведении на нее, она начинает магнититься к курсору, но контент(стрелка) остается на месте, но мне нужно чтобы она тоже магнитилась, как это можно сделать? Пример есть на этом сайте https://www.m-trust.co.jp/ , а вот мой код

    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;
}

span {
  padding-top: 60px;
}

.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%;
}

.intro__content__title {
    color: #FFF;
    padding-bottom: 40px;
    padding-top: 173px;
}

.intro__content__text {
    color: #fff;
    max-width: 400px;
    width: 100%;
    padding-bottom: 40px;
}

.intro__block__btn {
    display: flex;
    width: 100%;
}

.intro__text__btn { 
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    padding-right: 20px;
    padding-top: 25px;
}

.intro__block__img {
    max-width: 50%;
    width: 100%;
    padding-top: 102px;
    padding-bottom: 25px;
    padding-right: 100px;
    padding-left: 50px;
}

.intro__img {
    float: right;
    max-width: 674px;
    width: 100%;
}

.intro__footer {
    display: flex;
    width: 100%;
}

.intro__info {
    width: 95%;
    display: flex;
    padding-top: 45px;
    padding-bottom: 80px;
    color: #fff;
}

.intro__info span {
    padding-right: 7px;
}

.intro__info h2 {
    font-size: 20px;
    font-weight: 600;
    padding-right: 80px;
}

.intro__info h2:last-child {
    padding-right: 0px;
}

.intro__h2__one {
    order: 1;
}

.intro__h2__two {
    order: 2;
}

.intro__h2__three {
    order: 3;
}

.intro__h2__four {
    order: 4;
}

.recording__window__img {
    fill: #fff;
    position: fixed;
    right: 15%;
    bottom: 5%;
    float: right;
    width: 81px;
    height: 82px;
    z-index: 999;
}

.intro__social {
    position: absolute;
    right: 5%;
    bottom: 8%;
    display: flex;
    flex-direction: column;
}

.social__item {
    margin-bottom: 10px;
}

.social__icon {
    fill: #fff;
    width: 40px;
    height: 40px;
    fill-rule: evenodd; 
}

.social__icon:hover {
    transform: scale(1.1);
    transition: 0.3s;
}

                    <div class="intro__block__btn">
                        <p class="intro__text__btn">Записаться </p>
                        <a href="#form" class="btn btn-intro">
                            <span>--></span>
                        </a>
                    </div>

Answer 1

Играться со значениями координат, честно говоря, не очень хочу, но могу подбросить вам идею, как добиться того, что нужно на примере вашего кода. Идея в (+1 строку кода) такая: вместе с установкой координат для кнопки, просто установите координаты и для стрелки cur.e.querySelector('.arrow').style.transform = translate(${x-5}px,${y+10}px). Вот эта запись querySelector('.arrow') ищет нужный элемент внутри ивент таргет. Дальше - задайте позиционирование стрелке, чтобы ей можно было управлять. Пример кода привожу ниже:

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)`;
        cur.e.querySelector('.arrow').style.transform = `translate(${x-5}px,${y+10}px)`;
        //
        if(Math.abs(x) >= offset || Math.abs(y) >= offset) {
            cur.e.style.transform = 'translate(0,0)';
            cur.e.querySelector('.arrow').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;
}

.arrow {
  position: absolute;
  left: 10px;
  top: 20px;
  transition: transform .1s linear;
}




.intro__block__btn {
    display: flex;
    width: 100%;
}

.intro__text__btn { 
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    padding-right: 20px;
    padding-top: 25px;
}

  <div class="intro__block__btn">
                        <p class="intro__text__btn">Записаться </p>
                        <a href="#form" class="btn btn-intro">
                            <span class = 'arrow'>--></span>
                        </a>
                    </div>

БЛОГ НА HUSL

При наведении на кнопку, нужно чтобы кнопка магнитилась к курсору и стрелка в кнопке тоже

Ответы (1 шт):