Добавить эффект подчёркивания текста при наведении, как на сайтах с «живым» UI — не нужно ждать обновлений и заморачиваться с step by step в Tilda. Всё решается через один HTML-блок. Работает на любой кнопке, где можно вставить кастомный код. При наведении на кнопку (без фона) снизу появляется анимированная линия, как будто оно «подчёркивается» плавно. Работает красиво и нативно — особенно на заголовках, ссылках и меню. Для начала, создайте то количество кнопок которое вам нужно в Zero-блоке, удалите у каждой фон и сделайте ширину по размеру шрифта.
Добавить эффект подчёркивания текста при наведении, как на сайтах с «живым» UI — не нужно ждать обновлений и заморачиваться с step by step в Tilda. Всё решается через один HTML-блок. Работает на любой кнопке, где можно вставить кастомный код.
💡 Что будет?
При наведении на кнопку (без фона) снизу появляется анимированная линия, как будто оно «подчёркивается» плавно. Работает красиво и нативно — особенно на заголовках, ссылках и меню.
🔧 Как реализовать?
Для начала, создайте то количество кнопок которое вам нужно в Zero-блоке, удалите у каждой фон и сделайте ширину по размеру шрифта.
- Каждой кнопке назначить CSS класс: hoverdecor1 / hoverdecor2 / hoverdecor3
- Создайте шейп, по ширине кнопки (это будет ваш отступ подчеркивания) и назначьте этому шейпу CSS класс: hovermargin1 / hovermargin2 / hovermargin3
- Создайте шейп / линию по длине текста (это будет линия подчеркивания), поменяйте цвет на тот которым хотите подчеркивать текст, скруглите углы и назначьте CSS класс: hoverline1 / hoverline2 / hoverline3
- Скопируйте HTML код из текстового документа который можно найти в моем Telegram-канале и вставьте его в HTML блок на странице.
🚀 Рекомендации
- Анимацию можно настроить по вкусу, например, сделать её дольше (0.3s → 0.5s) или с другим эффектом (ease → ease-in-out).
- Анимацию линии можно изменить, сделать её слева направо, из центра, справа налево (с помощью цифр в CSS классах)