Лого www.SiteHere.ru

CSS3 библиотека — 40+ эффектов при наведении

CSS3 библиотека - 40+ эффектов при наведении

Чтобы привлечь внимание пользователей есть очень много способов: начиная от самых надоедливых и пугающих, я имею ввиду всплывающие окна, которые нельзя закрыть и переадресовывают на другие сайты, и более простых, таких как интересное выделение ссылки. Вот последний случай мы и рассмотрим в этом уроке. В этом уроке мы рассмотрим специальную библиотеку написанную на CSS3, которая позволяет выделять ссылки при наведении на нее. А это делает более интерактивную связь с пользователем.

По ссылкам, расположенным ниже, вы можете посмотреть примеры, а также скачать демо версию:

Посмотреть примерСкачать

PDF отчет

Как пользоваться? — 40+ эффектов при наведении

HTML часть

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

Вам нужен файл hover-min.css — это уменьшенная версия библиотеки. Его необходимо подключить в начале вашего сайта:

1
2
3
4
5
<head>  
..  
<link href="путь_до_файла/hover.css" rel="stylesheet">  
..  
</head>

Затем осталось лишь добавить эффект для нашей ссылки. К примеру вот код нашей ссылки:

1
<a href="#" class="btn">Кнпока</a>

Стиль для примера я выбрал вот такой:

Кнопка для примера

Если кому-то понравился стиль кнопки, вот код CSS для нее:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.btn {
    position: relative;
    vertical-align: top;
    width: 100%;
    height: 60px;
    padding: 0;
    font-size: 22px;
    color: white;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    background: #9b59b6;
    border: 0;
    border-bottom: 2px solid #8d4ca7;
    cursor: pointer;
    -webkit-box-shadow: inset 0 -2px #8d4ca7;
    box-shadow: inset 0 -2px #8d4ca7;
    text-decoration:none;
    padding:20px;
}

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

1
<a href="#" class="btn hover-shadow">Кнопка</a>

Вот и всё! Что получилось у меня (это GIF изображение, поэтому если анимации нет — нужно подождать пока подгрузится):

Анимации при наведении на ссылку

Вывод

Еще один неплохой набор эффектов, которые можно использовать в своих проектах. А всё что нужно — это подключить библиотеку CSS3!

Также про эффекты при наведение на ссылки вам будут интересны следующие статьи:

Успехов!

С Уважением, Юрий Немец

CSS3 библиотека — 40+ эффектов при наведении 5.00/5 (100.00%) 2 голос(ов)

Понравилась статья - расскажи друзьям! :)

Бесплатный PDF отчет
Комментарии (3) к записи
  • ЯЛена

    Спасибо за работу, некоторые эффекты я вообще вижу впервые. Буду использовать в работе красивые рамочки! 😎

     
  • Виктор

    Подскажите CSS для кнопок социальных сетей. Так, чтоб цвет каждой кнопки, соответствовал цвету социалки. И при этом, он не должен быть массивным, как в данный момент у меня получилось. smiley

     
    • Юрий Немец

      Мне цвета за Вас подобрать в CSS?

       

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

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