Красивые ссылки в Тильде, часть 2
Тильда — любимый мною конструктор сайтов. Всем она хороша, кроме стиля ссылок по-умолчанию: они не подчеркнуты. Поправим это в три простых шага, а бонусом сделаем плавную смену цвета.
1. Задаем цвет текста ссылки
Например, #2599e6. Для этого создадим блок Т193 «Модификатор: стиль ссылок» из раздела блоков «Другое», зайдем в настройки блока и вставим нужный цвет в поле «Цвет текста».
Чтобы блок работал для всего сайта, создайте его на специальной странице «Шапка сайта».
2. Задаем цвет подчеркивания
Например, #b5e1ff. В том же блоке ставим нужный цвет в поле «Цвет линии».
В идеальном мире линия того же цвета, что и ссылка, но полупрозрачная. В Тильде прозрачность линии не поменять, но эффект можно имитировать более светлым тоном и минимальной толщиной (1px в поле «Размер линии»).
3. Задаем цвет текста при наведении
Например, #ba0095. Заходим в «Настройки сайта», переходим в нижний раздел «Еще», нажимаем «Редактировать CSS». Вставляем код и сохраняем:
Переменные webkit-transition и transition обеспечат красивое затухание цвета при проносе курсора. Если не нужно, удалите эти строки.
Как сделать такое на тильде?
Вот что мне нужно сделать
Добрый день, Даниил!
Технически не сложно, а вот на практике — застрянете Вы этой задачей на день — два точно.
Начну прям супер по порядку и подробно.
Верстка, по примеру на фото возможна только в Zero Block (думаю, не новость).
Вопрос 1. Сначала вы настраиваете on hover анимацию в каждом отдельном Zero Block, чтобы при наведении цвет менялся и тому прочее. 
Если хотите очень сильно заморочиться, то попробуйте пошаговую анимацию.
Вопрос 2. У Вас сверху идет «фильтрация». Т.е. для этого Вам нужно сверстать 5 блоков и вот этим скриптом открывать нужный блок по клику на кнопку.
Где посмотреть ID блока? Настройки блока (левый верхний угол при наведении на блок) и в самый низ открывшегося окна. На примере «Block id: #rec161314266» 
Эффект при наведении на элемент в Zero-блоке
Мы привыкли, что при наведении на ссылку появляется подчёркивание. А в Zero-блоке даже этого нет, если выставить текстовому элементу ссылку в настройках. А что, если подчеркивание не просто будет появляться, но и станет цветным или градиентным, а также анимированным — появление подчёркивания начнётся в том месте, в котором вы навели мышкой на элемент?
Хм. А если подумать, то можно не только подчёркивание сделать, но и заливку всего элемента. Сложно представить… проще показать! Поэтому листайте в самый низ страницы и попробуйте навести на каждый элемент.
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».
- Зайдите в редактор кода двойным кликом на блок.
- Удалите стандартный код и пропишите следующее:
Для того, чтобы быстро получить код любого градиентного фона, попробуйте генератор градиента онлайн.
Продвинутая анимация
Мы рассмотрели некоторые из базовых css свойств, а теперь перейдём к более продвинутым и разберем несколько вариантов анимации кнопок при наведении в Tilda.
Hover анимация кнопок в Tilda. Вариант 1
- Создайте zero block.
- Нажмите на кнопку «Редактировать блок».
- Уберите стандартное наполнение блока.
- Нажмите на кнопку «+» и выберите «Add Button».
- Нажмите на кнопку правой кнопкой мыши и выберите пункт «Add css class name».
- Пропишите любой класс для вашей кнопки.
- Удалите стандартную цветовую заливку вашей кнопки (BG COLOR), чтобы она стала прозрачной.
- Нажмите на кнопку «+» и выберите пункт «Add Html».
- Зайдите в редактор кода двойным кликом на блок.
- Удалите стандартный код и пропишите следующее:
Hover анимация кнопок в Tilda. Вариант 2
- Создайте zero block.
- Нажмите на кнопку «Редактировать блок».
- Уберите стандартное наполнение блока.
- Нажмите на кнопку «+» и выберите «Add Button».
- Нажмите на кнопку правой кнопкой мыши и выберите пункт «Add css class name».
- Пропишите любой класс для вашей кнопки.
- Удалите стандартную цветовую заливку вашей кнопки (BG COLOR), чтобы она стала прозрачной.
- Нажмите на кнопку «+» и выберите пункт «Add Html».
- Зайдите в редактор кода двойным кликом на блок.
- Удалите стандартный код и пропишите следующее:
Hover анимация кнопок в Tilda. Вариант 3
- Создайте zero block.
- Нажмите на кнопку «Редактировать блок».
- Уберите стандартное наполнение блока.
- Нажмите на кнопку «+» и выберите «Add Button».
- Нажмите на кнопку правой кнопкой мыши и выберите пункт «Add css class name».
- Пропишите любой класс для вашей кнопки.
- Удалите стандартную цветовую заливку вашей кнопки (BG COLOR), чтобы она стала прозрачной.
- Нажмите на кнопку «+» и выберите пункт «Add Html».
- Зайдите в редактор кода двойным кликом на блок.
- Удалите стандартный код и пропишите следующее:
Hover анимация кнопок Tilda. Вариант 4
- Создайте zero block.
- Нажмите на кнопку «Редактировать блок».
- Уберите стандартное наполнение блока.
- Нажмите на кнопку «+» и выберите «Add Button».
- Нажмите на кнопку правой кнопкой мыши и выберите пункт «Add css class name».
- Пропишите любой класс для вашей кнопки.
- Удалите стандартную цветовую заливку вашей кнопки (BG COLOR), чтобы она стала прозрачной.
- Нажмите на кнопку «+» и выберите пункт «Add Html».
- Зайдите в редактор кода двойным кликом на блок.
- Удалите стандартный код и пропишите следующее:
Заключение
Хоть и использование программирования для создания hover эффектов в Tilda может показаться сложным для новичков в веб-разработке, но на самом деле это отличный способ добавить красивые и эффективные анимации на свой сайт. Если вы выполните все действия, описанные в этой статье, то обнаружите, что это не так уж и сложно. Главное, не бойтесь экспериментировать и создавать что-то новое, используя возможности, которые дает Tilda в купе со сторонним кодом.
Также попробуйте использовать плавающие облака, которые еще больше украсят ваш сайт. Посмотрите видео с плавающими облаками.