The Arrow effect

The Arrow effect

Setup

Info

Info

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

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

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

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

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

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

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

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

81508286

id:

Теги

Модификация

#

CSS

#

Кнопки

#

Скопировано!

Скопировать код

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

Базовые настройки

Цвет фона кнопки → –bg: #7046F7 (можно заменить на брендовый)

Цвет границы кнопки → –color: transparent (по умолчанию границы нет)

Цвет границы при наведении → –hover-color: #fff

Цвет текста при наведении → –hover-btn-color: #fff

Высота кнопки (автоматически подстраивается) → –btn03h: 56px (скрипт вычисляет фактическую высоту и задаёт переменную)

Толщина стрелки → border-top: 2px solid #fff; border-right: 2px solid #fff (можно менять цвет и толщину)

Размер стрелки → width: 10px; height: 10px (увеличение значения даст крупнее стрелку)

Скорость анимации заливки кнопки → transition: all 0.4s ease

Скорость анимации движения стрелки → transition: all 0.6s ease

Технические советы

Если в кнопке используется многострочный текст, важно проверять корректность позиционирования стрелки (top: 50% + transform)

Если кнопка используется на тёмном фоне, стоит изменить цвета стрелки (border-top/right) и текста при ховере, чтобы сохранить читаемость

При большом количестве кнопок с такой анимацией может быть нагрузка из-за JS-вычислений высоты → лучше один раз задать фиксированное значение –btn03h, если дизайн допускает

Подключение скриптов

Для корректной работы модификации необходимо, чтобы на странице была подключена библиотека jQuery, так как скрипт использует $(document).ready() и .each().

Информация о кастомизации кода доступна только в веб-версии сайта.

Сделать это можно в разделе: Настройки сайта - Ещё - Подключить jQuery на страницах сайта.

В Zero Block скрипты рекомендуется вставлять только после полной загрузки контента страницы, чтобы все элементы блока были доступны для обработки.

Текст скопирован в буфер обмена!

Текст скопирован в буфер обмена!