DRONE?
YOU NEED A REFLEX 3.
Proin nunc odio, malesuada maximus urna sed, efficitur laoreet
Morbi eros felis, blandit eget ullamcorper sed.
See the prices
|

Как создать кастомную кнопку в ZeroBlock в Tilda

Как создали данную кнопку?
1. Создали ZeroBlock и добавили в него элемент Button/Кнопка
2. Настроили эту кнопку:
- убрали фон, радиус, надпись
- добавили белую границу в 1px
- добавили тень
- задали ссылку #mybuttonbg
3. Создали элемент Image с иконкой вертолёта и разместили его поверх кнопки
4. Создали элементы Text и добавили поверх кнопки
5. Затем создали ещё одну кнопку в размер предыдущей и сделали её полностью прозрачной и без границ. Задали ей ссылку #mybutton. И наложили эту кнопку поверх первой и нашего контента (иконки и текста). Получился такой бургер кнопка-контент-кнопка
6. Затем добавили на страницу код в блок Другое►Т123

СПИСОК ВСЕХ ВИДЕО
Видеоинструкция данного примера
Видеоинструкция данного примера доступна в архиве
mo-tilda Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Содержание:
1. Создаём кнопку с анимацией в ZeroBlock
2. Настраиваем зависимую анимацию
3. Меняем ссылки у кнопок
4. Создаём дополнительные кнопки

Создаём сложную кнопку в ZeroBlock с произвольным расположением элементов и анимацией.
Продолжительность видео: 24 мин
Подписка к видеоинструкции на платной основе
Фрагмент видео
<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>
Made on
Tilda