Переливающаяся кнопка
Модификация позволяет создать эффект переливание кнопки
Описание
- В настройках меняем параметры под себя.
Блоку с каталогом
3 шаг
- Создаём кнопку с необходимыми размерами
- Убираем заливку, бордер, радиус скругления и присваиваем ей класс btn-gradient-animation (для темного фона) или btn-gradient-animation-1 (для светлого фона)
Создаем блок T123 и копируем в него код
2 шаг
Код скопирован!
Код скопирован!
Создаем Zero Block и открываем редактор
1 шаг
<!-- Модификация для Тильды. Переливающаяся кнопка http://sonneto-design.ru/subscription/btn-gradient -->
<style>
/*светлая кнопка*/
/* Настройки кнопок */
:root {
--btn-gradient-border-1: conic-gradient(from 0 at 50% 50%, rgb(196 117 255) 0deg, rgb(255 104 243 / 0%) 60deg, rgb(227 81 241 / 0%) 310deg, rgb(167 110 255) 360deg);
--btn-gradient-border-hover-1: conic-gradient(from 0 at 50% 50%, rgb(243 0 247) 0deg, rgb(255 104 243 / 0%) 60deg, rgb(227 81 241 / 0%) 310deg, rgb(255 0 199) 360deg);
--btn-gradient-bg-1: conic-gradient(from 0 at 50% 50%, rgb(255 146 231) 0deg, rgb(215 164 253) 60deg, rgb(255 146 231) 280deg, rgb(255 146 231) 180deg);
--btn-gradient-border-size-1: 1.15px solid;
--btn-gradient-border-color-1: #dfdfdf;
--btn-gradient-border-color-hover-1: #d5baff;
--btn-gradient-bg-opacity-1: 0.1;
--btn-gradient-bg-opacity-hover-1: 0.15;
--btn-gradient-border-radius-1: 10px;
}
.btn-wrapper-1 {
width: 100%;
height: 100%;
border: var(--btn-gradient-border-size-1);
position: absolute;
left: 50% !important;
border-radius: var(--btn-gradient-border-radius-1);
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-1 .tn-atom {
transition: all 0.4s !important;
}
.btn-bg-wrapper-1 {
height: 100%;
overflow: hidden;
position: absolute;
width: 100%;
top: 50%;
border-radius: var(--btn-gradient-border-radius-1);
left: 50%;
z-index: -1;
transform: translate(-50%, -50%);
}
.btn-gradient-animation-1 .btn-gradient-bg-1 {
width: 500px;
height: 500px;
opacity: var(--btn-gradient-bg-opacity-1);
transition: all 0.4s;
-webkit-animation: borderTurn-1 2.5s infinite linear;
background-image: var(--btn-gradient-bg-1);
position: absolute;
top: 50%;
z-index: -2;
left: 50%;
transform: translate(-50%, -50%);
}
.btn-gradient-animation-1:hover .btn-gradient-bg-1 {
opacity: var(--btn-gradient-bg-opacity-hover-1);
}
.btn-gradient-animation-1:hover .tn-atom {
transition: all 0.4s !important;
}
.btn-gradient-animation-1 .btn-gradient-1 {
transition: all 0.4s;
-webkit-animation: borderTurn-1 2.5s infinite linear;
width: 500px;
height: 500px;
background: var(--btn-gradient-border-color-1);
background-image: var(--btn-gradient-border-1);
position: absolute;
top: 50%;
z-index: -1;
left: 50%;
transform: translate(-50%, -50%);
}
.btn-gradient-animation-1:hover .btn-gradient-1 {
background: var(--btn-gradient-border-color-hover-1);
background-image: var(--btn-gradient-border-hover-1);
}
@keyframes borderTurn-1 {
0% {
transform: translate(-50%, -50%) rotate(0);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
@-webkit-keyframes borderTurn-1 {
0% {
-webkit-transform: translate(-50%, -50%) rotate(0);
}
to {
-webkit-transform: translate(-50%, -50%) rotate(360deg);
}
}
</style>
<script>
$(document).ready(function () {
$('.btn-gradient-animation-1').each(function () {
$('<div class="btn-wrapper-1"><div class="btn-gradient-1"></div></div>').appendTo($(this).find('.tn-atom'));
$('<div class="btn-bg-wrapper-1"><div class="btn-gradient-bg-1"></div></div>').appendTo($(this).find('.tn-atom'));
});
});
</script>
<style>
/*светлая кнопка*/
/* Настройки кнопок */
:root {
--btn-gradient-border-1: conic-gradient(from 0 at 50% 50%, rgb(196 117 255) 0deg, rgb(255 104 243 / 0%) 60deg, rgb(227 81 241 / 0%) 310deg, rgb(167 110 255) 360deg);
--btn-gradient-border-hover-1: conic-gradient(from 0 at 50% 50%, rgb(243 0 247) 0deg, rgb(255 104 243 / 0%) 60deg, rgb(227 81 241 / 0%) 310deg, rgb(255 0 199) 360deg);
--btn-gradient-bg-1: conic-gradient(from 0 at 50% 50%, rgb(255 146 231) 0deg, rgb(215 164 253) 60deg, rgb(255 146 231) 280deg, rgb(255 146 231) 180deg);
--btn-gradient-border-size-1: 1.15px solid;
--btn-gradient-border-color-1: #dfdfdf;
--btn-gradient-border-color-hover-1: #d5baff;
--btn-gradient-bg-opacity-1: 0.1;
--btn-gradient-bg-opacity-hover-1: 0.15;
--btn-gradient-border-radius-1: 10px;
}
.btn-wrapper-1 {
width: 100%;
height: 100%;
border: var(--btn-gradient-border-size-1);
position: absolute;
left: 50% !important;
border-radius: var(--btn-gradient-border-radius-1);
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-1 .tn-atom {
transition: all 0.4s !important;
}
.btn-bg-wrapper-1 {
height: 100%;
overflow: hidden;
position: absolute;
width: 100%;
top: 50%;
border-radius: var(--btn-gradient-border-radius-1);
left: 50%;
z-index: -1;
transform: translate(-50%, -50%);
}
.btn-gradient-animation-1 .btn-gradient-bg-1 {
width: 500px;
height: 500px;
opacity: var(--btn-gradient-bg-opacity-1);
transition: all 0.4s;
-webkit-animation: borderTurn-1 2.5s infinite linear;
background-image: var(--btn-gradient-bg-1);
position: absolute;
top: 50%;
z-index: -2;
left: 50%;
transform: translate(-50%, -50%);
}
.btn-gradient-animation-1:hover .btn-gradient-bg-1 {
opacity: var(--btn-gradient-bg-opacity-hover-1);
}
.btn-gradient-animation-1:hover .tn-atom {
transition: all 0.4s !important;
}
.btn-gradient-animation-1 .btn-gradient-1 {
transition: all 0.4s;
-webkit-animation: borderTurn-1 2.5s infinite linear;
width: 500px;
height: 500px;
background: var(--btn-gradient-border-color-1);
background-image: var(--btn-gradient-border-1);
position: absolute;
top: 50%;
z-index: -1;
left: 50%;
transform: translate(-50%, -50%);
}
.btn-gradient-animation-1:hover .btn-gradient-1 {
background: var(--btn-gradient-border-color-hover-1);
background-image: var(--btn-gradient-border-hover-1);
}
@keyframes borderTurn-1 {
0% {
transform: translate(-50%, -50%) rotate(0);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
@-webkit-keyframes borderTurn-1 {
0% {
-webkit-transform: translate(-50%, -50%) rotate(0);
}
to {
-webkit-transform: translate(-50%, -50%) rotate(360deg);
}
}
</style>
<script>
$(document).ready(function () {
$('.btn-gradient-animation-1').each(function () {
$('<div class="btn-wrapper-1"><div class="btn-gradient-1"></div></div>').appendTo($(this).find('.tn-atom'));
$('<div class="btn-bg-wrapper-1"><div class="btn-gradient-bg-1"></div></div>').appendTo($(this).find('.tn-atom'));
});
});
</script>
<!-- Модификация для Тильды. Переливающаяся кнопка http://sonneto-design.ru/subscription/btn-gradient -->
<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>
<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>
Для корректной работы блоков подключите библиотеку jQuery: Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
Важно
Создаем новую страницу на сайте
1 шаг
Скроллим в самый низ и нажимаем кнопку «Указать ID шаблона»
2 шаг
В графе указываем номер шаблона (он указан в инструкции)
Нажимаем кнопку «Выбрать»
Нажимаем кнопку «Выбрать»
3 шаг
Добавление страниц по id номеру возможно только при оплаченном тарифе на Tilda Personal и выше.
Важно
Вам также может быть интересно:
Pro подписка
Подсветка фона у кнопки
Эффекты кнопок
Pro подписка
Подсветка фона у кнопки
Эффекты кнопок
Текст скопирован в буфер обмена!
Текст скопирован в буфер обмена!
Сервисы
Пользователям
©2025 Все права защищены
