6

Плавное подчеркивание ссылки при наведении.

Здравствуйте, друзья. Сегодня поговорим как сделать плавное подчеркивание ссылки при наведении на нее.   Данный эффект, можно применить абсолютно для всех ссылок, или для выборочных помещенных в отдельный блок.

На своем сайте я применил эффект для всех ссылок. Вы можете посмотреть как он работает подведя курсор мышки к любой ссылке.  Результат достигается добавлением короткого css кода в файл style.css вашего блога.

Как создать код для эффекта плавного подчеркивания ссылки при наведении.

Сразу приведу  весь код полностью, который позволяет применить эффект для всех ссылок:

Теперь давайте рассмотрим, что здесь и зачем подробней:

Как вы знаете ссылка создается в виде блока с классом «link», внутри которого помещена собственно ссылка.

Xтобы создать эффект плавного подчеркивания при наведении необходимо задать для них свойства css. Вам необходимо внимательно прочитать комментарии к коду, и задать свойства подходящие для внешнего вида вашего сайта.

Далее, мы делаем плавное появление линии подчеркивания под ссылкой, добавлением элемента «after»:

Затем прописываем псевдоэлементы «:hover»:  и «:focus»: для задания 100% ширины элемента «after» Это позволяет плавно изменять ширину линии подчеркивания от 0% до полной ширины ссылки.

Если необходимо, чтобы при наведении ссылка меняла цвет, можно дописать следующий код:

Как вставить код на сайт.

Перед тем как вносить изменения в код, обязательно сделайте резервную копию сайта.

Данный код вставляется в самый конец  файла  style.css вашего сайта. Для этого заходите в панель управления сайтом «Внешний вид» (1) =>«Редактор» (2) =>«style.css» (3)

плавное подчеркивание ссылки при наведении

 

Не забудьте нажать кнопку «Обновить файл» (4) .

Эффект плавного подчеркивания ссылки при наведении полностью готов для вашего ресурса. На этом пожалуй все, применяйте данную функцию для улучшения внешнего вида и поведенческих факторов вашего сайта. До встречи!

Перейти на главную

комментариев 6
  1. admin
    15.02.2018 в 13:55

    Рад был помочь, используйте!

  2. Александр
    13.02.2018 в 21:10

    Благодаря этой функции, ссылки смотрятся эффектней и не стандартно, взял на заметку.

  3. admin
    31.01.2018 в 13:49

    Игорь, пожалуйста, используйте.

  4. Игорь Алешин
    31.01.2018 в 11:59

    Спасибо за информативную статью! Планирую в скором времени создать свой блог, поэтому решил для начала выучить все детали для его дизайна. Плавное подчеркивание и выделение цитат – то, что меня волновало больше всего. Благодаря вашему блогу, я все больше проникаюсь мыслью о создании идеального дизайна для сайта. Спасибо что описываете все подробности на простом языке!

  5. admin
    12.11.2017 в 15:09

    Пожалуйста, Елена, применяйте. Удачи!

  6. Елена
    12.11.2017 в 10:42

    Спасибо за подробное описание как внедрить данную интересную функцию на сайте.

Добавить комментарий

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.