Эффект подчёркивания при наведении на ссылку

Эффект подчёркивания при наведении на ссылку

Здравствуйте, дорогие друзья!

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

И будет он состоять всего из нескольких строчек кода.

Для того чтобы посмотреть как выглядит плавное подчёркивание ссылки при наведении просто наведите курсор на одну из ссылок ниже:

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

Предположим у Вас есть блок с классом «link» и внутри него есть ссылки, для которых нужно применить данный эффект при наведении.

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

Теперь для того чтобы создать плавное подчёркивание ссылки при наведении нам нужно при помощи CSS добавить псевдоэлемент after. Именно этот элемент и будет представлять собой плавно появляющуюся линию подчёркивания. Для него нам нужно прописать следующие свойства:

И на последнем этапе создания плавного подчёркивания ссылки нужно задать для песевдоэлемента after ширину 100% при наведении, а также при установленном курсоре. В этом нам помогут псевдоклассы :hover и :focus.
Выглядеть это будет так:

То есть изначально наш псевлоэлемент имеет ширину 0%, а при наведении она плавно становится 100%.
Также можно сделать так чтобы при наведении на ссылку помимо эффекта плавного подчёркивания происходила также смена цвета ссылки.

Для этого дописываем следующее:

Если вы хотите чтобы данный эффект применялся для всех ссылок на вашем сайте, то вместо «.link a» нужно будет писать «а».

Чтобы не сбивать вас с толку даю весь код вместе. В этом коде эффект плавного подчёркивания применится ко всем ссылкам на сайте:

После добавления данного кода просто сохраняете файл и всё! Всё очень просто не правда ли?! Вот за что я люблю CSS3! С его помощью можно за несколько минут создать очень интересные эффекты и при этом не нужно подключать дополнительных библиотек и т.д.

Куда вставлять весь этот код?

CSS код со всеми прописанными свойствами нужно вставить в CSS файл вашего сайта или вашей темы (если сайт работает на CMS)

Для WordPress этот файл будет находиться по адресу:

wp-content/themes/название темы/style.css

Для Opencart этот файл находится по адресу:

catalog/view/theme/название темы/stylesheet/stylesheet.css
Данный CSS код нужно вносить в самый конец CSS файла.

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

С уважением Юлия Гусарь

Подписаться на рассылку

Читайте также:

comments powered by HyperComments

8 комментариев

  1. Юлия,здравствуйте.Спасибо.Все получилось. Такой вопрос — скажите,пожалуйста,как можно сделать так, чтобы выделялся блок и изображением при наведении как на этом сайте. http://www.keramoteka.ru/

    • Здравствуйте, Кирилл!
      Это делается при помощи CSS. Например у Вас есть блок с классом «block», в котором находится изображение и текст. В CSS файле нужно прописать для него:
      .block{
      border: 5px solid #f1f1f1;
      }

      .block:hover{
      border: 5px solid #FFC61A;
      }

      Вместо «#f1f1f1» ставите цвет, который будет изначально у рамки, а вместо «#FFC61A» — цвет, который будет при наведении. Толщину рамки вы можете регулировать изменяя значение 5px.

  2. Юлия,Здравствуйте.Спасибо огромное.Все получилось.Вы супер.Очень много интересного и полезного уже применил,благодаря Вам.Спасибо.

    • Здравствуйте, Кирилл! И Вам спасибо! Заходите почаще :)

  3. Юля, добрый день. Спасибо за Ваши уроки, все очень интересно, особенно интересно когда касаются уроки про CSS. Сейчас стоит задача- сделать такие эффекты при наведении ( как на этом сайте http://designa8.ru/blog ) Скажите, пожалуйста, как это можно сделать. Спасибо

    • Здравствуйте, Кирилл! Если Вы имеете ввиду эффект окрашивания изображения при наведении, то там всё просто. Создаётся блок для которого задаётся какой то фоновый цвет, например красный block {background: red;} . Потом внутри этого блока размещается изображение и при наведении для него изменяется прозрачность при помощи CSS свойства opacity, например так: .block img:hover{ opacity:0.7; } Получается что при наведении изображение начинает просвечиваться и виден фон блока в итоге изображение становится красноватым или другого цвета, в зависимости от того какой цвет фона будет задан для блока, внутри которого оно находится.

      • Здравствуйте,Юлия. Спасибо за ответ. Получилось применить, но хочется, чтобы при наведении на это фото,это описание (к фото) на прозрачном фоне передвигалось также, как на том сайте. Там фото ->на фото описание на прозрачном фоне на половину изображения->при наведении это писанию передвигается в сторону закрывая другую половину изображения.  Спасибо большое.

        • Здравствуйте, Кирилл!
          Для перемещения блока с текстом можно использовать свойство margin-left (для смещения блока с текстом влево). В обычном состоянии значение margin-left:-100px; а при наведении margin-left:0; плюс нужно использовать свойство transition: all 0.5s ease; чтобы появление было более плавным. Но нужно смотреть вёрстку и экспериментировать чтобы получить такой эффект.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif