Войти
Библиотека
Вопросы и ответы
Контакты

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

Переливающаяся кнопка
Главная /
Библиотека /

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

Описание
Посмотреть пример
Видеоинструкция
Подключение шаблона
Пошаговая инструкция
Видеоинструкция по подключению
Инструкция с копированием шаблона к себе
ID шаблона:
42938261
Читать инструкцию
Создаём новую страницу на сайте
Шаг 1
Скроллим в самый низ и нажимаем кнопку «Указать ID шаблона»
Шаг 2
В графе указываем номер шаблона (он указан в начале инструкции), нажимаем кнопку «Выбрать»
Шаг 3
Пошаговая инструкция с подключением кода
Создаём кнопку с необходимыми размерами, убираем заливку, бордер, радиус скругления и писваиваем ей класс btn-gradient-animation (для темного фона) или btn-gradient-animation-1 (для светлого фона).
Шаг 1
Ниже, через блок t123 добавляем стили (темная версия)
Шаг 2
Показать код
<!--Переливающаяся кнопка
https://mt-webdesign.ru/btn-gradient-anim-->
<style>
/*темная кнопка*/
/* Настройки кнопок */
:root {
--btn-gradient-border: conic-gradient(from 0 at 50% 50%, rgb(100 205 245 / 100%) 0deg, rgb(255 255 255 / 0%) 60deg, rgb(255 255 255 / 0%) 310deg, rgb(86 249 220) 360deg);
--btn-gradient-border-hover: conic-gradient(from 0 at 50% 50%, rgba(255, 255, 255, 1) 0deg, rgba(255, 255, 255, 0) 60deg, rgba(255, 255, 255, 0) 310deg, rgba(255, 255, 255, 1) 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: 1.5px solid;
--btn-gradient-border-color: #333333;
--btn-gradient-border-color-hover: #595959;
--btn-gradient-bg-opacity: 0.1;
--btn-gradient-bg-opacity-hover: 0.4;
--btn-gradient-border-radius: 10px;
}
.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;
}
.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>
Ниже, через блок t123 добавляем стили (светлая версия)
Шаг 2
Показать код
<!--Переливающаяся кнопка
https://mt-webdesign.ru/btn-gradient-anim-->
<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;
}
.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>
В настройках меняем параметры под себя. (в видео я разбираю более подробно их)
Шаг 3
Более подробные настройки, возможности взаимодействия и подключение в видео
Другие модификации
Библиотека
3D галерея
Tilda
Подсказки при наведении курсора
Tilda