Евгений Галиев

HTML

<div class="son_wrapper">
    <div class="son_outercircle"></div>
    <a href="#yclients">
        <div class="son_circle">
            <div>ONLINE<br>ЗАПИСЬ</div>
        </div>
    </a>
</div>

CSS

/* КНОПКА ОНЛАЙН-ЗАПИСИ */
.son_wrapper {
    width: 100px;
    height: 100px;
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 9999;
}
/* Убираем подчеркивание */
.son_wrapper a {
    text-decoration: none;
}
/* Основной кружок */
.son_circle {
    width: 80px;
    height: 80px;
    border-radius: 250px;
    background: #333333; 
    background: linear-gradient(135deg, #222 50%, #444 100%) !important;
    box-shadow: 0px 1px 3px rgba(0,0,0,0.60);
}
/* Текст внутри */
.son_circle div {
    padding-top: 24px;  /* .son_circle - .son_circle div , разделить на 2 */
    text-align: center;
    font-size: 12px;
    line-height: 16px;
    height: 32px;
    font-family: 'Montserrat', sans-serif;
    color: #fff;
    font-weight: 500 !important;
}

/* Анимированный кружок */
.son_outercircle {
    z-index: -1000;
    position: absolute;
    width: 50px;
    height: 50px;
    border: 5px solid #D30073;
    border-radius: 50%;
    margin-top: 10px;
    margin-left: 10px;
    animation: son_outercircle 2s infinite linear;
}
@keyframes son_outercircle {
    0% {
        transform: scale(1,1) opacity: 1;
    }
    80% {
        opacity: 0.8;
    }
    100% {
        transform: scale(2,2);
        opacity: 0;
    }
}

/* Увеличить кнопку только на ПК */
@media screen and (min-width: 981px) {
    .son_wrapper {
        width: 140px;
        height: 140px;
    }
    .son_circle {
        width: 120px;
        height: 120px;
    }
    .son_circle div {
        padding-top: 40px; /* .son_circle минус высота .son_circle div и разделить на 2 */
        font-size: 15px;
        line-height: 20px;
        height: 40px;

    }
    .son_outercircle {
        width: 90px;
        height: 90px;
    }
}

Если нужно пододвинуть вверх на ПК устройствах, добавить:

@media screen and (min-width: 980px) {
    .son_wrapper {
        bottom: 60px;
    }
}

Скрипт Yclients

Можно использовать для открытия виджета Yclients. В таком случае подключите скрипт и замените ID в ссылке:

<script async src="https://w176901.yclients.com/widgetJS" charset="UTF-8">
</script>
<script>
  $(document).ready(function() {
    $('a[href^="#yclients"]').addClass('ms_booking');
  });
</script>
<script>
    var yWidgetSettings = {
        buttonAutoShow : false
    };
</script>

Ванильный аналог:

<script async src="https://w942510.yclients.com/widgetJS" charset="UTF-8">
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
  // Находим все ссылки, у которых href начинается с "#yclients"
  var links = document.querySelectorAll('a[href^="#yclients"]');

  // Добавляем класс 'ms_booking' к каждому найденному элементу
  links.forEach(function(link) {
    link.classList.add('ms_booking');
  });
});
</script>
<script>
    var yWidgetSettings = {
        buttonAutoShow : false
    };
</script>

Виджет будет открываться по ссылке #yclients.