10 интересных эффектов при наведении для ссылок

Здравствуйте, дорогие читатели!

В этой статье, я вам дам несколько готовых примеров интересных эффектов при наведении для ссылок.
Данные эффекты создаются исключительно средствами CSS3 и основываются на использовании псевдоклассов и псевдоэлементов.

Примеры всех этих эффектов Вы можете посмотреть перейдя по ссылке ниже:

Что нужно сделать для использования эффектов при неведении на своём сайте?

1. 1.Скачать вот этот архив, в котором находится 2 css файла и страница с примером.
    
   Скачать архив
2. 2.Загрузите файл hover-effects.css на свой сайт в папку «CSS», которая находится в папке с темой. Если такой папки у вас нет, то создайте её.
   Для сайта на WordPress эта папка находится по адресу:
   wp-content/themes/Название темы
3. 3.Подключить загруженный CSS файл со стилями для эффектов при наведении в шапке сайта перед закрытием.
   Для сайта на WordPress это необходимо сделать в шаблоне header.php, который находится в папке с темой.
4. 4.Для подключения скрипта используйте код:
   
   PHP

   <link href="путь к папке с темой/css/hover-effects.css" rel="stylesheet">

   1	<link href="путь к папке с темой/css/hover-effects.css" rel="stylesheet">

   Полный путь к файлу у вас должен выглядеть примерно так:

   PHP

   <link href="http://site.ru/wp-content/themes/impulsweb/css/hover-effects.css" rel="stylesheet">

   1	<link href="http://site.ru/wp-content/themes/impulsweb/css/hover-effects.css" rel="stylesheet">

   Однако в WordPress есть специальная php-функция bloginfo, которая позволяет автоматически определять путь к папке с темой.

   С её использованием данный код будет выглядеть так:

   PHP

   <link href="<?php bloginfo('template_directory') ?>/css/hover-effects.css" rel="stylesheet">

   1	<link href="<?php bloginfo('template_directory') ?>/css/hover-effects.css" rel="stylesheet">

5. 5. Для применения определённого эффекта используем такой код:
   XHTML

   <div class="he-nav iw-effect-2"> <a href="#">Ссылка 1</a> <a href="#">Ссылка 2</a> <a href="#">Ссылка 3</a> </div>

   1 2 3 4 5

   <div class="he-nav iw-effect-2"> <a href="#">Ссылка 1</a> <a href="#">Ссылка 2</a> <a href="#">Ссылка 3</a> </div>

   При этом вместо iw-effect-2 пишем название класса того эффекта, который вам понравился.

Сами примеры и названия их классов можно посмотреть на этой странице:

Данный эффект при наведении применится ко всем ссылкам, которые есть у внутри блока с классом he-nav.

Редактирование стилей эффектов при наведении

Если вам нужно изменить цвет самой ссылки или элементов подчёркивания, то нужно:

1. 1.Открыть для редактирования файл hover-effects.css, который мы ранее загружали.
2. 2.Найти там класс, который вы использовали, например iw-effect-3
3. 3.Для изменения цвета ссылки ищем среди всех CSS-свойств для данного класса свойство color: и меняем там цвет на нужный.
   Более подробно о форматах задания цветов и кодировках их значений я писала в этой статье.
4. 4.Если вам нужно изменить цвет элементов при наведении, то вам нужно искать свойство background: для псевдоэлементов before и after, находящихся в этом же классе.
   Если вам нужно определить код цвета на сайте, то вам наверняка пригодится материал из этой статьи:
   Как определить цвет на сайте

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

Так же буду рада видеть ваши комментарии!

На сегодня у меня всё! Удачи вам с применением данный эффектов при наведении! Хорошего вам дня и до скорых встреч!

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