Стилизация ссылок в zero block
Модификация добавляет стиль ссылке на выбор: цвет, подчеркивание или цвет с подчеркиванием до и после наведения. Можно назначить разные стили ссылкам, либо единый стиль всем ссылкам в zero block. Решение применяется для текстовых элементов в zero block, в которых прописана ссылка. Демо решения.
Как сделать стандартную стилизацию ссылкам
Ссылку можно задать текстовому элементу в настройках zero block или слову/фразе внутри текстового элемента через верхнюю панель.
- Укажи в настройках ниже цвет текста, толщину и цвет подчеркивания, отступ над подчеркиванием до и после наведения. Если нужно, чтобы при наведении не было изменений, то укажи до и после одинаковые значения. Если нужно сделать подчеркивание прозрачным, то укажи значение transparent.
- Пропиши уникальный класс в настройках ниже, если нужно использовать разные стили для ссылок в zero block. Для каждого стиля ссылки используй разные классы. Например, класс .link-effect (обязательно с точкой!). Этот класс пропиши текстовому элементу, в котором находится ссылка. Инструкция по добавлению своего класса элементу. Оставь поле пустым, если нужно использовать единый стиль для ссылок в zero block на всем сайте.
- Скопируй сгенерированный код и вставь на свой сайт. Памятка по вставке кода.
<!-- https://romanyu.ru/effekt-ssylki-zeroblock -->
<style>
[data-elem-type="text"] a {
text-decoration: none !important;
transition: all 0.3s ease !important;
border: 0 !important;
/* цвет ссылки до наведения */
color: #bdbdbd !important;
/* толщина и цвет подчеркивания до наведения */
border-bottom: 1px solid transparent !important;
/* отступ между ссылкой и подчеркиванием до наведения */
padding-bottom: 2px !important;
}
[data-elem-type="text"] a:hover {
/* цвет ссылки после наведения */
color: #e42e3a !important;
/* толщина и цвет подчеркивания после наведения */
border-bottom: 3px solid #e42e3a !important;
/* отступ между ссылкой и подчеркиванием после наведения */
padding-bottom: 2px !important;
}
</style>Как сделать стилизацию ссылкам с анимацией подчеркивания при наведении
Ссылку можно задать текстовому элементу в настройках zero block или слову/фразе внутри текстового элемента через верхнюю панель.
Ограничение: ссылка должна быть прописана в одну строку, то есть без переноса на вторую строку.
Ограничение: ссылка должна быть прописана в одну строку, то есть без переноса на вторую строку.
- Выбери анимацию. Название анимации соответствует названию в демо.
- Укажи в настройках ниже цвет ссылки, толщину и цвет подчеркивания, отступ между ссылкой и подчеркиванием.
- Пропиши уникальный класс в настройках ниже, если нужно использовать разные стили для ссылок в zero block. Для каждого стиля ссылки используй разные классы. Например, класс .link-effect-menu (обязательно с точкой!). Этот класс пропиши текстовому элементу, в котором находится ссылка. Инструкция по добавлению своего класса элементу. Оставь поле пустым, если нужно использовать единый стиль для ссылок в zero block на всем сайте.
- Скопируй сгенерированный код и вставь на свой сайт. Памятка по вставке кода.
<!-- https://romanyu.ru/effekt-ssylki-zeroblock -->
<style>
[data-elem-type="text"] a {
border: 0 !important;
display: inline-block !important;
width: auto !important;
position: relative !important;
transition: all 0.3s ease !important;
/* цвет ссылки до наведения */
color: #bdbdbd !important;
}
[data-elem-type="text"] a:hover {
/* цвет ссылки после наведения */
color: #e42e3a !important;
}
[data-elem-type="text"] a::after {
content: '';
position: absolute;
transition: all 0.3s ease;
margin: auto;
/* отступ между ссылкой и подчеркиванием;
если нужно сделать расстояние больше, то используй отрицательное значение */
margin-bottom: 0px;
/* толщина подчеркивания */
height: 0px;
/* цвет подчеркивания до наведения */
background: #bdbdbd;
opacity: 0;
top: auto;
bottom: 20%;
left: 0;
right: 0;
width: 100%;
}
[data-elem-type="text"] a:hover::after {
/* цвет подчеркивания после наведения */
background: #e42e3a;
opacity: 1;
top: auto;
bottom: 0;
left: 0;
right: 0;
width: 100%;
}
</style>Понравилось решение?
Закинь денежку в благодарность за крутые и полезные модификации для Тильды!
Код успешно скопирован!