7 Нескучных кнопок для сайта в тильде | Tilda Zero Block, Figma

• Макс Куратов рассказывает о нестандартных кнопках в конструкторе сайтов Tilda.  

• Основное внимание уделяется кнопкам для заработка, так как стандартные кнопки ограничены в функционале.  

• Стандартные кнопки в Tilda включают обложки и формы заявок.  

• Можно настроить цвет текста, фона и дополнительные параметры, такие как цвет фона при наведении.  

• Доступны различные анимации и эффекты для кнопок.  

• Макс переходит к обсуждению кнопок для заработка.  

• Планируется работа с Figma и кодом для реализации кнопок.  

• Будут рассмотрены триггерные анимации и демонстрация видео на сайте.  

• Макс объясняет, как нарисовать две кнопки: одну с градиентом, другую с обводкой.  

• При наведении кнопка с градиентом должна исчезать, показывая кнопку с обводкой.  

• Важно правильно расположить текст на кнопке.  

• Макс показывает, как нарисовать и залить кнопку градиентом.  

• Закругление краев и настройка градиента.  

• Создание кнопки с обводкой и настройка градиента для обводки.  

• Экспорт кнопки в формате SVG для сохранения качества.  

• Импорт кнопки в Tilda и настройка блока.  

• Удаление элементов и заливка фона черным цветом.  

• Создание кнопки и настройка прозрачности.  

• Настройка триггерной анимации для кнопки.  

• При клике на кнопку должна появляться заливка.  

• Проверка работы кнопки в предпросмотре.  

• Привязка действия к слою заливки.  

• Реализация увеличения кнопки при клике.  

• Триггерная анимация сохраняется при клике.  

• При наведении на кнопку анимация не происходит.  

• Для изменения триггера нужно удалить текущий и добавить новый.  

• При клике на кнопку обводка увеличивается.  

• Можно индивидуально масштабировать элементы по осям X и Y.  

• При наведении меняется фон.  

• Кнопка состоит из текстового шейпа, заливки и обводки.  

• Заливка и обводка анимируются при клике.  

• Обводка увеличивается, а заливка уменьшается.  

• Кнопка состоит из трех слоев: текст, шейп и обводка.  

• Обводка неподвижна, шейп уменьшается при клике.  

• Настройка триггера для уменьшения шейпа.  

• Изменение триггеров для кнопки.  

• Обводка увеличивается при клике.  

• Настройка скорости анимации для обводки.  

• Кнопка с анимацией при нажатии.  

• Использование шейпов для анимации.  

• Настройка анимации для кликабельной иконки.  

• Анимация шейпов для кнопки.  

• Увеличение и уменьшение шейпов.  

• Возвращение к первоначальному состоянию.  

• Копирование и выравнивание элементов.  

• Настройка прозрачности и цвета обводки.  

• Выбрал три элемента, выровнял их по горизонтали и вертикали.  

• Применил анимацию увеличения элемента за две секунды до больших размеров.  

• Анимация плавная, от 100% до 0% прозрачности.  

• Изменил скорость анимации на более медленную.  

• Перешел к сервису для поиска иконок и изменил цвет иконки на белый.  

• Вставил иконку в центр элемента и назначил ей URL.  

• Использовал ссылку для привязки кнопки к видео.  

• Для реализации кнопки нужен небольшой кусочек кода.  

• Вставил код в контент сайта и добавил кнопку с бордюром.  

• Получил ID кнопки через предпросмотрщик.  

• Вставил ID в код, добавив цвет и смещение.  

• Изменения видны только после публикации страницы.  

• Подвел итоги работы с кнопкой.  

• Убрал нан из события и использовал триггер анимации.  

• Призвал развивать правое и левое полушария мозга.  

• Призывает поставить лайк, подписаться на канал и искать исходные материалы в телеграм-канале.