Free
Setup
Info
Info
Включено в подписку
Скопировано!
Поделиться
Настройки
[
Написать в поддержку
Telegram: @sonneto_support
Кастомизация
]
Модификации
Кнопки и текст
/
URL скопирован в буфер обмена!
Transfusion effect
Setup
Info
Info

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

  • Вставляем кнопку на страницу и назначаем ей класс: btn-sonneto-primary

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

  • Дополнительно добавляем блок Т123 и вставляем в него скрипт после кода из генератора.

<script>
$(document).ready(function () {
$('.btn-sonneto-primary').each(function () {
$('<div class="btn-wrapper"><div class="btn-gradient"></div></div>').appendTo($(this).find('.tn-atom'));
$('<div class="btn-bg-wrapper"><div class="btn-gradient-bg"></div></div>').appendTo($(this).find('.tn-atom'));
});
});
</script>

Генератор кода

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

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

Переливающаяся кнопка

81510366
id:
Теги

Модификация

#

CSS

#

Кнопки

#
Скопировано!
Скопировать скрипт
Подключение скриптов
Базовые настройки
  • Цвет границы кнопки → –btn-gradient-border-color: #333333 (можно менять на брендовый)

  • Цвет границы при наведении → –btn-gradient-border-color-hover: #333333

  • Градиент границы → –btn-gradient-border: conic-gradient(from 0 at 50% 50%, rgb(245 100 228 / 50%) 0deg, rgb(255 104 243 / 0%) 60deg, rgb(227 81 241 / 0%) 310deg, rgb(196 86 249 / 50%) 360deg)

  • Градиент границы при наведении → –btn-gradient-border-hover: conic-gradient(from 0 at 50% 50%, rgba(255, 255, 255, .5) 0deg, rgba(255, 255, 255, 0) 60deg, rgba(255, 255, 255, 0) 310deg, rgba(255, 255, 255, .5) 360deg)

  • Градиент фона → –btn-gradient-bg: conic-gradient(from 0 at 50% 50%, rgba(255, 255, 255, 0.3) 0deg, rgba(255, 255, 255, 0) 60deg, rgba(255, 255, 255, 0.3) 280deg, rgba(255, 255, 255, 0.3) 180deg)

  • Прозрачность фона → –btn-gradient-bg-opacity: 0.1

  • Прозрачность фона при наведении → –btn-gradient-bg-opacity-hover: 0.4

  • Толщина границы → –btn-gradient-border-size: 1px solid

  • Скругление углов → –btn-gradient-border-radius: 100px

  • Скорость анимации → transition: all 0.4s

  • Скорость вращения градиента → -webkit-animation / animation: borderTurn 2.5s infinite linear
Технические советы
  • Если в кнопке используется многострочный текст, важно проверять корректность позиционирования стрелки (top: 50% + transform)

  • В Safari и Firefox возможны различия в сглаживании анимации заливки — лучше тестировать на разных браузерах

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

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

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

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

Сделать это можно в разделе: Настройки сайта - Ещё - Подключить jQuery на страницах сайта.
В Zero Block скрипты рекомендуется вставлять только после полной загрузки контента страницы, чтобы все элементы блока были доступны для обработки.
Текст скопирован в буфер обмена!
Текст скопирован в буфер обмена!