Подчёркивание текста кнопок при наведении в ЗЕРО блоке Тильды. Эффект кнопки Тильда Кнопка ЗЕРО блок

Подчёркивание текста кнопок при наведении в ЗЕРО блоке Тильды. Эффект кнопки Тильда Кнопка ЗЕРО блок.

Ссылка на код:
https://howmakesite.ru/products/Podch...


🏆 Мой СУПЕР-Курс по программированию в Тильде:
https://howmakesite.ru/products/Kurs-...

Партнёрская программа:
https://howmakesite.ru/products/pages...
===================

Нередко на сайтах применяется эффект подчёркивание текста кнопок меню при наведении мыши.
Подчёркивание может пригодиться как снизу, так и сверху или перед текстом или за ним, а также оно может выползать слева направо, из центра или справа налево и иметь разный цвет, толщину и даже бордюр и скругления по углам или вообще выглядеть как картинка.
Чтобы реализовать в Тильде такое подчёркивание кнопки меню в ЗЕРО-блоке, можно воспользоваться SBS-анимацией. Так обычно и делают. Создают под каждым текстом шейп, которому назначают первым шагом нулевой масштаб, а при наведении на кнопку вторым шагом масштаб увеличивают до 100%. Неудобно это тем, что для каждой кнопки приходится создавать отдельный шейп и равнять все эти шейпы по длине текстов кнопок. Потом надо делать то же самое для других диапазонов дисплеев – как минимум для диапазона от 960 до 1200, потому что нередко этот диапазон также включает в себя устройства с мышью, где эффект по наведению должен ещё работать. Если же в процессе вёрстки приходится перетаскивать кнопки, то их надо очень внимательно таскать вместе с этими шейпами и следить, чтобы они не расползлись. Плюс ко всему, захламляется панель слоёв, в которой потом трудно разобраться какой шейп к какой кнопке относится.
В общем, кто это делал, тот понимает сколько уходит времени и как всё это чертовски неудобно.

А что если я Вам предложу создать всего лишь два шейпа, которые вообще никуда таскать не надо? Вы просто размещаете кнопки где требуется и не паритесь по поводу шейпов. Всё будет работать корректно на любых размерах дисплеев.

Это очень просто с моим новым программным кодом:
Создаём кнопку, назначаем ей CSS-класс «hoverdecor1». Клонируем сколько надо таких кнопок и всем пишем нужные тексты. Разумеется, на разных дисплеях они могут выглядеть по-разному.
Далее создаём шейп, который будет символизировать само подчёркивание. Отключаем ему LazyLoad и назначаем CSS-класс «hoverline1». По длине не паримся, потому что мой программный код сам будет растягивать это подчёркивание на нужную длину текста для разных кнопок. Нас интересует только высота (то есть, толщина линии) и стиль подчёркивания, поэтому задаём этому шейпу необходимую высоту, цвет, можно даже применять бордюры если надо и скругление по углам, а также можете туда загрузить картинку. Тащим этот шейп под текст любой кнопки, чтобы просто прикинуть как высоко он должен располагаться. Это может быть и над кнопкой и перед ней или за кнопкой и под ней. То же самое – расположение, толщину, цвет, бордюр и скругление – задаём ему для других дисплеев.
После этого создаём второй шейп, присваиваем ему класс «hovermargin1», равняем его по верхнему краю кнопки и по высоте делаем таким, чтобы он доставал до шейпа подчёркивания. В результате получается высота, равная расстоянию от верхнего края кнопки до шейпа подчёркивания. Программный код будет все подчёркивания выравнивать по этой высоте. Корректируем его для других дисплеев.
Эти два шейпа мой программный код скроет, поэтому в принципе вы их можете так и оставить или убрать с глаз долой.

После этого добавляем на страницу из раздела «Другое» блок T-123 HTML, жмём «Контент» и вставляем туда мой программный код. Публикуем страницу и видим что вне зависимости от расположения и длины текста кнопок, при наведении мыши они все подчёркиваются ровно по длине текста, и это корректно работает для разных размеров экрана.
При этом вы можете задавать стартовую анимацию кнопкам, чтобы при загрузке они выползали как надо. Подчёркивание будет работать. И также всё работает с резиновой вёрсткой.

Ключевые слова:
подчеркивание кнопки тильда
эффект кнопки тильда
подчеркивание меню тильда
эффект меню тильда
подчеркивание кнопки зеро
эффект кнопки зеро
подчеркивание меню зеро
эффект меню зеро
подчеркивание кнопки zero
эффект кнопки zero
подчеркивание меню zero
эффект меню zero
выделение меню тильда
эффект меню тильда
выделение меню зеро
эффект меню зеро
подчеркивание кнопок тильда
подчеркивание при наведении тильда