Как создать кастомную кнопку в ZeroBlock в Tilda
1
Создали ZeroBlock и добавили в него элемент Button/Кнопка
2
Настроили эту кнопку:
- убрали фон, радиус, надпись
- добавили белую границу в 1px
- добавили тень
- задали ссылку #mybuttonbg
- убрали фон, радиус, надпись
- добавили белую границу в 1px
- добавили тень
- задали ссылку #mybuttonbg
3
Создали элемент Image с иконкой вертолёта и разместили его поверх кнопки
4
Создали элементы Text и добавили поверх кнопки
5
Затем создали ещё одну кнопку в размер предыдущей и сделали её полностью прозрачной и без границ. Задали ей ссылку #mybutton
(можно любую свою ссылку)
. И наложили эту кнопку поверх первой и нашего контента (иконки и текста). Получился такой бургер кнопка-контент-кнопка
(можно любую свою ссылку)
. И наложили эту кнопку поверх первой и нашего контента (иконки и текста). Получился такой бургер кнопка-контент-кнопка
6
Затем добавили на страницу код в блок Другое►Т123
Mo-ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Создаём сложную кнопку в ZeroBlock с произвольным расположением элементов и анимацией.
Продолжительность видео: 20 мин
Продолжительность видео: 20 мин
Фрагмент видео
Библиотека для примера
<style>
/*Эффект при наведении*/
.effbtn{
/*Цвет границы*/
border-color: #007bff !important;
/*Ширина левой границы*/
border-left-width: 340px !important;
/*Размер тени*/
box-shadow: 0px 5px 28px 0px rgba(0,0,0,0.2) !important;
}
/*Время анимации и вид*/
.noeffbtn{
transition: all 0.8s ease-in-out !important;
}
</style>
<script>
//Добавляем класс состояние без эффекта к обеим кнопкам
$('[href="#mybuttonbg"] , [href="#mybutton"]').addClass('noeffbtn');
//При наведении на верхнюю кнопку
$("[href='#mybutton']").hover(function(){
//Добавляем к нижней кнопе класс с анимацией
$('[href="#mybuttonbg"]').addClass('effbtn');
},function(){
//Убираем от нижней кнопки класс с анимацией
$('[href="#mybuttonbg"]').removeClass('effbtn');
});
</script>
