CODYSHOP
темы и плагины для WordpressСуществует сотни способов для создания красивых ссылок на чистом CSS. Сегодня хотелось бы поделиться оригинальными способами их оформления. В этой коллекции я постарался собрать такие эффекты для ссылок, которые подходят для сплошных текстов, а не отдельных кнопок-ссылок. Кроме того, были отобраны варианты для ссылок стандартного вывода: <a href="url">Текст ссылки</a>, без добавления дополнительных тегов. Это позволит вам производить изменения в существующие сайты без дополнительного вмешательства в html разметку. Для работы со ссылками в спецификации CSS существует 4 псевдокласса:
- :link — ссылка, по которой ещё не переходили.
- :hover — ссылка, над которой сейчас находится курсор мыши.
- :active — ссылка, которую в данный момент нажимает пользователь.
- :visited — посещённая ссылка, то есть та, по которой уже переходили.
Underline Hover
Анимация основана на плавном увеличении подчеркивания.
Демо
Скачать
Animate Underline Wavy
Необычное волнистое подчеркивание, которое анимируется при наведении курсора. Для корректной работы, у ссылки должен присутствовать атрибут data-text. Этот вариант не очень подходит, если у вас уже существует множество ссылок.
Демо
Скачать
Follow Along Links
При наведении курсором, ссылка оформляется фоновой заливкой. При переходе от ссылки к ссылке, фон также плавно переходит.
Демо
Скачать
Anchor Hover Effects
Из этой коллекции, эта ссылка мне больше всего понравилась. Основана на использовании псевдоэлементов :after и :before
Демо
Скачать
Progress Link
Эффект основан на планом изменении цвета текста.
Демо
Скачать
Ссылки которые открываются в новом окне
Особенность этого оформления - появление подсказки. С помощью CSS у ссылки определяется наличие атрибута target, и через псевдоэлементы выводится уведомление пользователю. Очень удобно.
Демо
Скачать
Link hover effect
Простой эффект, основанный на плавном появлении верхнего и нижнего подчеркивания.
Демо
Скачать