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

Подключение кода

Скопировать шаблон

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

Описание

Смотреть пример

id номер:

68062215

Шаблон страницы

Номер скопирован!

Скопировать номер

Добавляем кнопку

Задаем ей CSS-класс btn-sonneto-primary

Убираем цвет bg color (делаем её прозрачной)

Задаем цвет текста при наведении (color on hover)

Создаем блок T123 и копируем в него код

2 шаг

Код скопирован!

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

Создаем Zero Block и открываем редактор

1 шаг

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