Модификатор для кнопок, который добавляет стрелку слева и растягивает фон при наведении.

Эффект кнопки со стрелкой

Личный кабинет

Разработка модификаций

Preview

The Arrow effect

Настройки модификации

Setup

Открываем Zero Block и заходим в режим редактирования.

Размещаем в нём кнопку и присваиваем ей собственный класс: btn-sonneto-primary

Фон у кнопки убираем полностью — оставляем её прозрачной.

Дополнительно задаём эффект изменения цвета текста при наведении курсора.

Далее добавляем блок T123 и вставляем в него подготовленный код.

Код для вставки

<style>
:root {
    --bg: #7046F7;
    --color:transparent;
    --hover-color:#fff ;
    --hover-btn-color:#fff ;
    --btn03h: 56px;
}
.btn-sonneto-primary .tn-atom {
    position: relative;
    overflow: hidden;
    z-index: 1
}

.btn-sonneto-primary .tn-atom:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: var(--btn03h);
    height: 100%;
    border-radius: 50%;
    background: var(--bg);
    transition: all 0.4s ease;
    z-index: -1;
}

.btn-sonneto-primary .tn-atom:before {
    position: absolute;
    content: "";
    top: 50%;
    /*left: 1.0625rem;*/
    left:calc(var(--btn03h) / 2);
    width: 10px;
    height: 10px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: translate(-50%, -50%) rotate(45deg);
    transition: all 0.6s ease;
}
.btn-sonneto-primary .tn-atom {
    border-color: var(--color);
}
.btn-sonneto-primary .tn-atom:hover {
    border-color: var(--hover-color);
    color: var(--hover-btn-color)!important;
}
.btn-sonneto-primary .tn-atom:hover:after {
    width: 100%;
    border-radius: 0;
}

.btn-sonneto-primary .tn-atom:hover:before {
    transform: translate(100%, -50%) rotate(45deg);
}
.btn-sonneto-primary .tn-atom {padding-left:30px;}
</style>
<script>
    $(document).ready(function() {
    $(".btn-sonneto-primary .tn-atom").each(function() {
        let btnHeight = $(this).outerHeight();
        $(this).get(0).style.setProperty('--btn03h', `${btnHeight}px`);
    });
});

</script>

Политика обработки персональных данных

Публичная оферта

Политика обработки персональных данных

Публичная оферта