Ноябрь 21, 2014 Запись была обновлена
CSS3 библиотека — 40+ эффектов при наведении
Чтобы привлечь внимание пользователей есть очень много способов: начиная от самых надоедливых и пугающих, я имею ввиду всплывающие окна, которые нельзя закрыть и переадресовывают на другие сайты, и более простых, таких как интересное выделение ссылки. Вот последний случай мы и рассмотрим в этом уроке. В этом уроке мы рассмотрим специальную библиотеку написанную на CSS3, которая позволяет выделять ссылки при наведении на нее. А это делает более интерактивную связь с пользователем.
По ссылкам, расположенным ниже, вы можете посмотреть примеры, а также скачать демо версию:
Посмотреть примерСкачать
Как пользоваться? — 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 при наведении
- Оригинальный эффект CSS3 при наведении на…
- Как красиво оформить ссылки
Успехов!
С Уважением, Юрий Немец
Еще материалы по этой теме
Спасибо за ваше обращение!
Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)
Спасибо за работу, некоторые эффекты я вообще вижу впервые. Буду использовать в работе красивые рамочки! 😎
Подскажите CSS для кнопок социальных сетей. Так, чтоб цвет каждой кнопки, соответствовал цвету социалки. И при этом, он не должен быть массивным, как в данный момент у меня получилось.
Мне цвета за Вас подобрать в CSS?