Сейчас узнаем, какой подарок выпадет именно Вам

Крутите колесо

Ура, вы выиграли!
Ваш приз:
Годовой доступ
к видео на mo-ti -20%
по промокоду T19RAY
Промокод действителен 3 дня

Оформить доступ с промокодом

100

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

Создали ZeroBlock и добавили в него элемент Button/Кнопка

Настроили эту кнопку:
- убрали фон, радиус, надпись
- добавили белую границу в 1px
- добавили тень
- задали ссылку #mybuttonbg

Создали элемент Image с иконкой вертолёта и разместили его поверх кнопки

Создали элементы Text и добавили поверх кнопки

Затем создали ещё одну кнопку в размер предыдущей и сделали её полностью прозрачной и без границ. Задали ей ссылку #mybutton
(можно любую свою ссылку)
. И наложили эту кнопку поверх первой и нашего контента (иконки и текста). Получился такой бургер кнопка-контент-кнопка

Затем добавили на страницу код в блок Другое►Т123

Mo-ti Level Up

Видео инструкции по добавлению кода и работе с Zero Block.

Получить полное видео

Посмотреть все видео

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