Коллекция из 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

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

Демо

Скачать