Предприниматель в агротехе. Сооснователь Кситеста, Бластима и yCamp. Сайты: русский, английский

Красивые ссылки в Тильде, часть 2

Тильда — любимый мною конструктор сайтов. Всем она хороша, кроме стиля ссылок по-умолчанию: они не подчеркнуты. Поправим это в три простых шага, а бонусом сделаем плавную смену цвета.

(Зачем вообще подчеркивать ссылки? Мнение Лебедева, дискуссия у Бирмана)

1. Задаем цвет текста ссылки

Например, #2599e6. Для этого создадим блок Т193 «Модификатор: стиль ссылок» из раздела блоков «Другое», зайдем в настройки блока и вставим нужный цвет в поле «Цвет текста».

Чтобы блок работал для всего сайта, создайте его на специальной странице «Шапка сайта».

2. Задаем цвет подчеркивания

Например, #b5e1ff. В том же блоке ставим нужный цвет в поле «Цвет линии».

В идеальном мире линия того же цвета, что и ссылка, но полупрозрачная. В Тильде прозрачность линии не поменять, но эффект можно имитировать более светлым тоном и минимальной толщиной (1px в поле «Размер линии»).

3. Задаем цвет текста при наведении

Например, #ba0095. Заходим в «Настройки сайта», переходим в нижний раздел «Еще», нажимаем «Редактировать CSS». Вставляем код и сохраняем:

a, a:visited {
-webkit-transition: 0.5s ease;
transition: 0.5s ease; 
}

a:hover, a:visited:hover {
color: #ba0095 !important;
-webkit-transition: 0s ease;
transition: 0s ease; 
}

Переменные webkit-transition и transition обеспечат красивое затухание цвета при проносе курсора. Если не нужно, удалите эти строки.

Результат с цветами из примеров смотрите на моем сайте:

Подписаться на блог
Отправить
Поделиться
Запинить
 9765   2019  
5 комментариев
Oksana Melnyk 2020

Спасибо, но как исключить смену цвета на кнопках?

Яна Митрофанова 2021

Исключение смены цвета на кнопках
div[data-elem-type=«text»] a:hover {
тут код
}

Вячеслав Николаев 2021

Исключение смены цвета на кнопках этот код не работает!

div[data-elem-type=«text»] a:hover {
}

Подскажите как это исправить?

Данил Шевченко 2022

Не отвечу сам, никто не ответит))

Вячеслав, код Яны не работает из-за кавычек. Должны быть «кавычки-лапки», вместо «кавычек-ёлочек»

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

Reak Name 2022

Очень полезная статья, но что-то непонятно как исключить кнопки из кода. Вообще если фронт тут какой-то появится, напишите в комментаж плз, как этот код:

a, a:visited {
-webkit-transition: 0.5s ease;
transition: 0.5s ease;
}

a:hover, a:visited:hover {
color: #ba0095 !important;
-webkit-transition: 0s ease;
transition: 0s ease;
}

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