Pro
Setup
Info
Info
Включено в подписку
Настройки
[
Написать в поддержку
Telegram: @sonneto_support
Кастомизация
]
The Arrow effect
<style>
.btn-sonneto-primary {
position: absolute;
cursor:pointer;
}
.btn-sonneto-primary .tn-atom {
overflow: hidden;
position: relative;
z-index: 1!important;
}
.btn-sonneto-primary .tn-atom:before {
--size: 0;
content: '';
position: absolute;
left: var(--before-x);
top: var(--before-y);
width: var(--size);
height: var(--size);
background: radial-gradient(circle closest-side, #E8FF6F, transparent);
border-radius: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: width 0.2s ease, height 0.2s ease;
transition: width 0.2s ease, height 0.2s ease;
z-index: -1;
}
.btn-sonneto-primary:hover .tn-atom:before {
--size: 400px;
}
</style>
<script>
$(document).ready(function () {
$('.btn-sonneto-primary .tn-atom').on('mousemove', function (e) {
var $this = $(this),
btnOffset = $this.parent().offset(),
xPos = parseInt(e.pageX - btnOffset.left),
yPos = parseInt(e.pageY - btnOffset.top);
$this.css('--x', xPos + 'px');
$this.css('--y', yPos + 'px');
var beforeElement = $this[0].style;
beforeElement.setProperty('--before-x', xPos + 'px');
beforeElement.setProperty('--before-y', yPos + 'px');
});
});
</script>
.btn-sonneto-primary {
position: absolute;
cursor:pointer;
}
.btn-sonneto-primary .tn-atom {
overflow: hidden;
position: relative;
z-index: 1!important;
}
.btn-sonneto-primary .tn-atom:before {
--size: 0;
content: '';
position: absolute;
left: var(--before-x);
top: var(--before-y);
width: var(--size);
height: var(--size);
background: radial-gradient(circle closest-side, #E8FF6F, transparent);
border-radius: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: width 0.2s ease, height 0.2s ease;
transition: width 0.2s ease, height 0.2s ease;
z-index: -1;
}
.btn-sonneto-primary:hover .tn-atom:before {
--size: 400px;
}
</style>
<script>
$(document).ready(function () {
$('.btn-sonneto-primary .tn-atom').on('mousemove', function (e) {
var $this = $(this),
btnOffset = $this.parent().offset(),
xPos = parseInt(e.pageX - btnOffset.left),
yPos = parseInt(e.pageY - btnOffset.top);
$this.css('--x', xPos + 'px');
$this.css('--y', yPos + 'px');
var beforeElement = $this[0].style;
beforeElement.setProperty('--before-x', xPos + 'px');
beforeElement.setProperty('--before-y', yPos + 'px');
});
});
</script>
Настройки модификации
- Открываем Zero Block и заходим в режим редактирования.
- Вставляем кнопку на страницу и назначаем ей класс: btn-sonneto-primary
- Далее добавляем блок T123 и вставляем в него подготовленный код.
Модификатор добавляет подсветку кнопки при наведении курсора.
Подсветка фона у кнопки
81509096
id:
Теги
Модификация
#
CSS
#
Кнопки
#
Подключение скриптов
Базовые настройки
- Цвет фона кнопки → –bg: #7046F7 (цвет подсветки при наведении; можно заменить на брендовый)
- Цвет границы кнопки → –color: transparent (по умолчанию границы нет)
- Цвет границы при наведении → –hover-color: #fff
- Цвет текста при наведении → –hover-btn-color: #fff
- Высота кнопки (автоматически подстраивается) → –btn03h: 56px (скрипт вычисляет фактическую высоту и задаёт переменную)
- Скругление начального состояния подсветки → border-radius: 50% (круглая подложка при старте)
- Скругление при наведении → border-radius: 0 (подложка растягивается на всю ширину)
- Скорость анимации заливки кнопки → transition: all 0.4s ease
- Отступ текста слева → padding-left: 30px (важно для правильного позиционирования содержимого относительно подложки)
Технические советы
- Если кнопка содержит многострочный текст, важно проверять корректное отображение анимации подложки и её ширину.
- В Safari и Firefox возможны различия в сглаживании анимации заливки — тестировать на разных браузерах.
- Если кнопка используется на тёмном фоне, стоит проверить читаемость текста при наведении и при необходимости изменить --hover-btn-color.
- При большом количестве кнопок с такой анимацией может быть нагрузка из-за JS-вычислений высоты → можно задать фиксированное значение --btn03h, если дизайн позволяет.
- Псевдоэлемент :before в текущем коде есть, но визуально не заметен; его можно использовать для будущих дополнений (например, стрелки), но сейчас он не влияет на видимый эффект.
Для корректной работы модификации необходимо, чтобы на странице была подключена библиотека jQuery, так как скрипт использует $(document).ready() и .each().
Информация о кастомизации кода доступна только в веб-версии сайта.
Сделать это можно в разделе: Настройки сайта - Ещё - Подключить jQuery на страницах сайта.
В Zero Block скрипты рекомендуется вставлять только после полной загрузки контента страницы, чтобы все элементы блока были доступны для обработки.
Текст скопирован в буфер обмена!
Текст скопирован в буфер обмена!