Hover анимация кнопок в Tilda Publishing
Введение
Tilda Publishing – один из самых популярных конструкторов сайтов, который позволяет создавать высококачественные сайты, не имея опыта веб-дизайна. Но как сделать сайт на Тильде более привлекательным и интерактивным? Hover анимация кнопок в Tilda – один из способов.
Hover — это анимация, которая происходит при наведении на объект. В Тильде это можно легко сделать, используя Zero Block – один из готовых блоков, который можно добавить на любую страницу сайта. В Zero Block уже встроены готовые эффекты, которые можно настроить под свой сайт. Но, стандартный функционал довольно ограниченный. Поэтому имеет смысл воспользоваться сторонним кодом, если вы хотите сделать на своём сайте что-то особенное!
Как сделать Hover эффекты для кнопок в Tilda
Базовая анимация
Для начала, давайте настроим базовые эффекты при наведении, используя css код:
- Создайте zero block.
- Нажмите на кнопку «Редактировать блок».
- Уберите стандартное наполнение блока.
- Нажмите на кнопку «+» и выберите «Add Button».
- Нажмите на кнопку правой кнопкой мыши и выберите пункт «Add css class name».
- Пропишите любой класс для вашей кнопки.
- Удалите стандартную цветовую заливку вашей кнопки (BG COLOR), чтобы она стала прозрачной.
- Нажмите на кнопку «+» и выберите пункт «Add Html».
- Зайдите в редактор кода двойным кликом на блок.
- Удалите стандартный код и пропишите следующее:
<style>
.button_class { //Класс вашей кнопки
background-color: red; //Фоновый цвет
border-radius: 30px; //Радиус округления границ
color: white; //Цвет текста внутри кнопки
}
.button_class:hover{//Класс, который добавляется вашей кнопке при наведении
background: linear-gradient(90deg, #3FEC72 11.62%, #1E9A84 82.04%); //Фоновый градиентный цвет при наведении
transform: scale(1.2); //Увеличение кнопки при наведении
box-shadow: 0 0 10px rgba(0,0,0,0.5); //Тень при наведении
color: yellow; //Цвет текста внутри кнопки при наведении
}
</style>Для того, чтобы быстро получить код любого градиентного фона, попробуйте генератор градиента онлайн.
Продвинутая анимация
Мы рассмотрели некоторые из базовых css свойств, а теперь перейдём к более продвинутым и разберем несколько вариантов анимации кнопок при наведении в Tilda.
Hover анимация кнопок в Tilda. Вариант 1
- Создайте zero block.
- Нажмите на кнопку «Редактировать блок».
- Уберите стандартное наполнение блока.
- Нажмите на кнопку «+» и выберите «Add Button».
- Нажмите на кнопку правой кнопкой мыши и выберите пункт «Add css class name».
- Пропишите любой класс для вашей кнопки.
- Удалите стандартную цветовую заливку вашей кнопки (BG COLOR), чтобы она стала прозрачной.
- Нажмите на кнопку «+» и выберите пункт «Add Html».
- Зайдите в редактор кода двойным кликом на блок.
- Удалите стандартный код и пропишите следующее:
<style>
.btn-1 {
padding: 1em 3em;
border: 3px solid #4a90e2;
transition: all 300ms ease;
box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, 0.2);
}
.btn-1:before {
position: absolute;
content: '';
width: 0%;
height: 100%;
background: #4a90e2;
top: 0;
left: 50%;
z-index: -1;
transition: all 0ms ease;
}
.btn-1:hover {
color: white;
box-shadow: none;
}
.btn-1:hover:before {
position: absolute;
content: '';
width: 100%;
height: 100%;
background: #4a90e2;
top: 0;
left: 0%;
z-index: -1;
transition: all 300ms ease;
}
</style>
Hover анимация кнопок в Tilda. Вариант 2
- Создайте zero block.
- Нажмите на кнопку «Редактировать блок».
- Уберите стандартное наполнение блока.
- Нажмите на кнопку «+» и выберите «Add Button».
- Нажмите на кнопку правой кнопкой мыши и выберите пункт «Add css class name».
- Пропишите любой класс для вашей кнопки.
- Удалите стандартную цветовую заливку вашей кнопки (BG COLOR), чтобы она стала прозрачной.
- Нажмите на кнопку «+» и выберите пункт «Add Html».
- Зайдите в редактор кода двойным кликом на блок.
- Удалите стандартный код и пропишите следующее:
<style>
.btn-2 {
padding: 1em 3em;
border: 3px solid #4a90e2;
transition: all 300ms ease;
box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, 0.2);
}
.btn-2:before {
position: absolute;
content: '';
width: 0%;
height: 100%;
background: #4a90e2;
top: 0;
left: auto;
right: 0;
z-index: -1;
transition: all 300ms ease;
}
.btn-2:hover {
color: white;
box-shadow: none;
}
.btn-2:hover:before {
position: absolute;
content: '';
width: 100%;
height: 100%;
background: #4a90e2;
top: 0;
left: 0;
right: 0;
z-index: -1;
}
</style>Hover анимация кнопок в Tilda. Вариант 3
- Создайте zero block.
- Нажмите на кнопку «Редактировать блок».
- Уберите стандартное наполнение блока.
- Нажмите на кнопку «+» и выберите «Add Button».
- Нажмите на кнопку правой кнопкой мыши и выберите пункт «Add css class name».
- Пропишите любой класс для вашей кнопки.
- Удалите стандартную цветовую заливку вашей кнопки (BG COLOR), чтобы она стала прозрачной.
- Нажмите на кнопку «+» и выберите пункт «Add Html».
- Зайдите в редактор кода двойным кликом на блок.
- Удалите стандартный код и пропишите следующее:
<style>
.btn-3 {
padding: 1em 3em;
border: 3px solid #4a90e2;
transition: all 300ms ease;
box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, 0.2);
}
.btn-3:before {
content: '';
width: 0%;
height: 2px;
position: absolute;
top: 10%;
left: 10%;
background: #4a90e2;
transition: all 0ms ease;
}
.btn-3:after {
content: '';
width: 80%;
height: 0px;
position: absolute;
top: 10%;
left: 10%;
background: #4a90e2;
transition: all 0ms ease;
z-index: -1;
}
.btn-3:hover {
color: white;
box-shadow: none;
}
.btn-3:hover:before {
content: '';
width: 80%;
height: 2px;
position: absolute;
top: 10%;
left: 10%;
background: #4a90e2;
transition: all 300ms ease;
}
.btn-3:hover:after {
content: '';
width: 80%;
height: 80%;
position: absolute;
top: 10%;
left: 10%;
transition: all 300ms ease;
transition-delay: 350ms;
}
</style>Hover анимация кнопок Tilda. Вариант 4
- Создайте zero block.
- Нажмите на кнопку «Редактировать блок».
- Уберите стандартное наполнение блока.
- Нажмите на кнопку «+» и выберите «Add Button».
- Нажмите на кнопку правой кнопкой мыши и выберите пункт «Add css class name».
- Пропишите любой класс для вашей кнопки.
- Удалите стандартную цветовую заливку вашей кнопки (BG COLOR), чтобы она стала прозрачной.
- Нажмите на кнопку «+» и выберите пункт «Add Html».
- Зайдите в редактор кода двойным кликом на блок.
- Удалите стандартный код и пропишите следующее:
<style>
.btn-4 {
padding: 1em 3em;
border: 3px solid #4a90e2;
transition: all 300ms ease;
box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, 0.2);
}
.btn-4:before {
content: '';
height: 0%;
width: 2px;
position: absolute;
top: 10%;
left: 10%;
background: #4a90e2;
transition: all 0ms ease;
}
.btn-4:after {
content: '';
height: 80%;
width: 0px;
position: absolute;
top: 10%;
left: 10%;
background: #4a90e2;
transition: all 0ms ease;
z-index: -1;
}
.btn-4:hover {
color: white;
box-shadow: none;
}
.btn-4:hover:before {
content: '';
height: 80%;
width: 2px;
position: absolute;
top: 10%;
left: 10%;
background: #4a90e2;
transition: all 300ms ease;
}
.btn-4:hover:after {
content: '';
height: 80%;
width: 80%;
position: absolute;
top: 10%;
left: 10%;
transition: all 300ms ease;
transition-delay: 350ms;
}
</style>Заключение
Хоть и использование программирования для создания hover эффектов в Tilda может показаться сложным для новичков в веб-разработке, но на самом деле это отличный способ добавить красивые и эффективные анимации на свой сайт. Если вы выполните все действия, описанные в этой статье, то обнаружите, что это не так уж и сложно. Главное, не бойтесь экспериментировать и создавать что-то новое, используя возможности, которые дает Tilda в купе со сторонним кодом.
Также попробуйте использовать плавающие облака, которые еще больше украсят ваш сайт. Посмотрите видео с плавающими облаками.
