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

Красивые эффекты при наведении на ссылки

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

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

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

 

Как сделать интернет-магазин?

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

  1. 1.Скачать вот этот архив, в котором находится 2 css файла и страница с примером.
     

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

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

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

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

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

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

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

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

Важно! Если в вашей теме уже используются какие то стили для псевдоэлементов before и after то данные эффекты могут работать некорректно. Это связано с тем, что стили конфликтуют между собой.

Если такое случилось, но вам очень хочется применить эти эффекты, то попробуйте закомментировать в файле style.css вашей темы все стили, которые связаны с псевдоэлементами before и after.

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

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

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

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

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

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

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

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

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

comments powered by HyperComments

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

  1. Хорошая статья, думаю для многих будет полезной

  2. Спасибо //impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif
    —————-
    + Чистый аккуратный код исходника. Хорошие готовые примеры.
    + Без JS
    + Весьма актуальные современные примеры.
    Недостатки: кросс браузерность до IE 9. и кнопка в IE «Перейти назад к статье» (может есть JQuery на обработку опред. тэгов CSS для IE9 ?)

    • И вам спасибо, за то, что заглянули на мой сайт!

  3. Юлия круто! Спасибо за эффекты!

    • И вам спасибо за комментарий!

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

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

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