Оставьте заявку или свяжитесь со мной удобным способом
Заявка на разработку сайта
Наживая кнопку вы соглашаетесь на обработку персональных данных
Стилизация кнопок в zero блоках Тильды
Модификация позволяет сделать различные эффекты для кнопок в Tilda. Кнопка с градиентом, кнопка с подсветкой, магнитная кнопка, кнопка, которая меняет радиус скругления по наведению и многие другие эффекты.
Пример использования
Эффект примагничивания работает только на десктопной версии сайта, так как в мобильных устройствах нет эффекта наведения.
Инструкция
1
В zero block создаем кнопку, шэйп, изображение или текст, к которым нужно применить эффект и задаём им класс .magnetizm
2
Создаём блок T123 и вставляем в него код, расположенный ниже.
3
Подробная инструкция по настройке эффекта магнитной кнопки для стандартных блоков, zero блоков и всего сайта находится на этой странице.
<!--Магнитная кнопка-->
<!--https://mkotelnikov.ru/script/interesting-buttons-->
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js'></script>
<script>
if ($(window).width() > 768) {
var magnetizm = document.querySelectorAll('.magnetizm');
magnetizm.forEach(function(elem){
$(document).on('mousemove touch', function(e){
magnetize(elem, e);
});
})
function magnetize(el, e){
var mX = e.pageX,
mY = e.pageY;
const item = $(el);
const customDist = item.data('dist') * 20 || 120;
const centerX = item.offset().left + (item.width()/2);
const centerY = item.offset().top + (item.height()/2);
var deltaX = Math.floor((centerX - mX)) * -0.45;
var deltaY = Math.floor((centerY - mY)) * -0.45;
var distance = calculateDistance(item, mX, mY);
if(distance < customDist){
TweenMax.to(item, 0.5, {y: deltaY, x: deltaX, scale:1.1});
item.addClass('magnet');
}
else {
TweenMax.to(item, 0.6, {y: 0, x: 0, scale:1});
item.removeClass('magnet');
}
}
function calculateDistance(elem, mouseX, mouseY) {
return Math.floor(Math.sqrt(Math.pow(mouseX - (elem.offset().left+(elem.width()/2)), 2) + Math.pow(mouseY - (elem.offset().top+(elem.height()/2)), 2)));
}
}
</script>
1
В zero block создаем кнопку, к которой хотим применить эффект анимированной подсветки, назначаем ей класс .btn-gradient.
2
Добавляем кнопке обводку, эффекти при наведении не назначаем. Всё это прописано в коде.
3
Создаём блок T123 и вставляем в него код, расположенный ниже.
<!--кнопка с подсветкой-->
<!--https://mkotelnikov.ru/script/interesting-buttons-->
<style>
.btn-gradient .tn-atom {
position: relative;
}
.btn-gradient .tn-atom {
border-color: rgba(255, 255, 255, 0.3) !important;
}
.btn-gradient .tn-atom::after {
position: absolute;
content: "";
top: 10px;
left: 0;
right: 0;
z-index: -1;
height: 100%;
width: 100%;
transform: scale(0.8) translateZ(0);
filter: blur(15px);
background: linear-gradient(
to left,
#ff5770,
#e4428d,
#c42da8,
#9e16c3,
#6501de,
#9e16c3,
#c42da8,
#e4428d,
#ff5770
);
background-size: 200% 50%;
background-position: 0 0;
animation-name: animateGlow;
animation-duration: 1.25s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes animateGlow {
0% {
transform: scale(0.8);
}
100% {
transform: scale(0.9);
}
}
@-webkit-keyframes animateGlow {
0% {
transform: scale(0.8);
}
100% {
transform: scale(0.9);
}
}
.btn-gradient:hover .tn-atom {
background-color: rgba(0, 0, 0, 0.1) !important;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.btn-gradient:hover .tn-atom:after {
top: 0;
}
</style>
1
В zero block создаем кнопку, к которой хотим применить анимированный фоновый градиент, назначаем ей класс .btn-bg-grad.
2
Эффекты при наведении задавать не нужно. Всё это прописано в коде.
3
Создаём блок T123 и вставляем в него код, расположенный ниже.
<!--кнопка с фоновым градиентом-->
<!--https://mkotelnikov.ru/script/interesting-buttons-->
<style>
.btn-bg-grad .tn-atom {
background-image: linear-gradient(to right, #121718 0%, #397466 25%, #FAC753 50%, #A4C79B 55%, #214744 100%) !important;
background-position: 0 0 !important;
background-size: 400% 200% !important;
transition: all 1s ease-in-out !important;
}
.btn-bg-grad .tn-atom:hover {
background-position: 100% 0 !important;
}
</style>
1
В zero block создаем кнопку, к которой хотим применить эффект скругления углов при наведении, назначаем ей класс .btn-round-border.
2
В zero блоке для кнопки задаём настройки цвета текста и цвета фона при наведении. Обводку не назначаем. Обводка настраивается через код.
3
Создаём блок T123 и вставляем в него код, расположенный ниже.
<!--кнопка скругление углов-->
<!--https://mkotelnikov.ru/script/interesting-buttons-->
<style>
.btn-round-border {
transition: all 1s;
overflow: hidden;
outline: 1px solid;
}
.btn-round-border:hover {
border-radius: 50px;
outline: 1px solid #fff528;
}
</style>
1
В zero block создаем кнопку, к которой хотим добавить иконку и необычную анимацию при наведении, назначаем ей класс .arrow-btn.
2
В zero block для кнопки настраиваем цвет текста и цвет текста при наведении. Цвет фона для кнопки не устанавливаем. Это делается в коде.
3
Создаём блок T123 и вставляем в него код, расположенный ниже. В коде настраиваем цвет кружка, который будет расположен под иконкой.
4
Загружаем изображение нашей иконки. Рекомендую использовать иконку размером 20×20px. Копируем url иконки и меняем её в коде.
<!--кнопка со стрелкой-->
<!--https://mkotelnikov.ru/script/interesting-buttons-->
<style>
.arrow-btn .tn-atom:before {
content: '';
width: 60px;
height: 60px;
position: relative;
display: inline-block;
vertical-align: middle;
margin-right: 10px;
/*заменяем в url изображения иконки на свою*/
background: url(https://static.tildacdn.com/tild6336-6166-4134-b131-333239636466/arrow-right.svg);
background-position: center;
background-repeat: no-repeat;
transition: all 0.3s ease-in-out;
}
.arrow-btn .tn-atom:after {
content: '';
width: 60px;
height: 60px;
/*устанавливаем цвет фона под иконкой*/
background-color: #232323;
position: absolute;
display: inline-block;
vertical-align: middle;
margin-right: 8px;
left:0;
z-index: -1;
transition: all 0.3s ease-in-out;
border-radius: 100px;
}
.arrow-btn .tn-atom {
text-align:left;
padding-right: 30px;
}
.arrow-btn:hover .tn-atom:after {
width: 100% !important;
}
.arrow-btn:hover .tn-atom:before {
padding-left: 20px;
margin-right: -10px;
}
.arrow-btn {
width: fit-content !important;
}
</style>
© 2022, Михаил Котельников
© 2022 Михаил Котельников