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

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

  • Добавляем кнопку и задаём ей нужные размеры.

  • Убираем фон, границу и скругление углов. Присваиваем кнопке класс: btn-gradient-animation

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

<style>
/*темная кнопка*/
/* Настройки кнопок */
:root {
--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-border-size: 1px solid;
--btn-gradient-border-color: #333333;
--btn-gradient-border-color-hover: #333333;
--btn-gradient-bg-opacity: 0.1;
--btn-gradient-bg-opacity-hover: 0.4;
--btn-gradient-border-radius: 100px;
}


.btn-wrapper {
width: 100%;
height: 100%;
border: var(--btn-gradient-border-size);
position: absolute;
left: 50% !important;
border-radius: var(--btn-gradient-border-radius);
top: 50% !important;
transform: translate(-50%, -50%);
content: "";
inset: 0;
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask-composite: exclude;
-webkit-mask-composite: clear;
}

.btn-gradient-animation .tn-atom {
transition: all 0.4s !important;
}

.btn-bg-wrapper {
height: 100%;
overflow: hidden;
position: absolute;
width: 100%;
top: 50%;
border-radius: var(--btn-gradient-border-radius);
left: 50%;
z-index: -1;
transform: translate(-50%, -50%);
}

.btn-gradient-animation .btn-gradient-bg {
width: 500px;
height: 500px;
opacity: var(--btn-gradient-bg-opacity);
transition: all 0.4s;
-webkit-animation: borderTurn 2.5s infinite linear;
background-image: var(--btn-gradient-bg);
position: absolute;
top: 50%;
z-index: -2;
left: 50%;
transform: translate(-50%, -50%);
}

.btn-gradient-animation:hover .btn-gradient-bg {
opacity: var(--btn-gradient-bg-opacity-hover);
}

.btn-gradient-animation:hover .tn-atom {
transition: all 0.4s !important;
}

.btn-gradient-animation .btn-gradient {
transition: all 0.4s;
-webkit-animation: borderTurn 2.5s infinite linear;
width: 500px;
height: 500px;
background: var(--btn-gradient-border-color);
background-image: var(--btn-gradient-border);
position: absolute;
top: 50%;
z-index: -1;
left: 50%;
transform: translate(-50%, -50%);
}

.btn-gradient-animation:hover .btn-gradient {
background: var(--btn-gradient-border-color-hover);
background-image: var(--btn-gradient-border-hover);
}

@keyframes borderTurn {
0% {
transform: translate(-50%, -50%) rotate(0);
}

to {
transform: translate(-50%, -50%) rotate(360deg);
}
}

@-webkit-keyframes borderTurn {
0% {
-webkit-transform: translate(-50%, -50%) rotate(0);
}

to {
-webkit-transform: translate(-50%, -50%) rotate(360deg);
}
}
</style>


<script>
$(document).ready(function () {
$('.btn-gradient-animation').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 скрипты рекомендуется вставлять только после полной загрузки контента страницы, чтобы все элементы блока были доступны для обработки.
Текст скопирован в буфер обмена!
Текст скопирован в буфер обмена!