Коллекция из 7 анимированных ссылок на CSS

Существует сотни способов для создания красивых ссылок на чистом 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

Простой эффект, основанный на плавном появлении верхнего и нижнего подчеркивания.
• Демо
• Скачать