Какое можно сделать в css оформление ссылок при наведении?

В СSS есть тысячи способов применить красивые эффекты к ссылкам. В этой заметке я хотел бы поделиться парочкой очень простых рецептов, которые украсят ваши ссылки.

Красивые эффекты ссылок на CSS

В HTML для этих экспериментов я пока только подключу таблицу стилей, задам кодировку и поставлю одну ссылку. Вся работа происходит с помощью CSS. Демонстрацию всех эффектов вы можете посмотреть, перейдя на эту страницу

Медленно выдвигающееся подчеркивание

Это первый эффект, который я покажу.

a{
	font-size: 36px;
	text-decoration: none;
	transition: 1s
}
a:hover{
	border-bottom: 5px solid purple
}

Итак, размер шрифта поставим достаточно большой, чтобы было видно ссылку. Отменим подчеркивание, которое ставится ссылкам по умолчанию. Transition – это свойство, которое задает задержку.

Сам эффект реализуется с помощью селектора “a:hover”. Это псевдокласс, который применяется к элементам, когда на них наводится курсор мышки. Далее задаем рамку снизу, толщиной 5 пикселей, фиолетового цвета.

Теперь посмотрим на сам эффект. Наведите курсор на ссылку. У нее плавно выдвинется подчеркивание. Это покрасивее будет, чем подчеркивание по умолчанию! Точно также можно задать границу слева, справа или сверху, а можно даже со всех сторон.

Придвигающееся снизу подчеркивание

Этот эффект чуть более сложен в реализации, но смотрится достаточно красиво.

а:after{
	width: 120px; height: 5px;
	content: ""; background: purple;
	display: block; transform: translateY(30px);
	opacity: 0; transition: 1.2s
}
а:hover:after{
	opacity: 1; transform: translateY(0)
}

Базовые стили для ссылки задаются такие же, как в предыдущем примере. Далее нам нужно создать псевдоэлемент. Это и будет наше подчеркивание. Задаем цвет, ширину и высоту. Свойства content и display обязательно нужно указывать, чтобы псевдоэлемент отобразился правильно.

Далее нужно прописать задержку (я написал 1,2 секунды), поставить прозрачность на 0, чтобы элемент не был виден при отсутствии наведения на ссылку. Последнее, что мы сделаем – с помощью трансформации сдвинем элемент вниз на 30 пикселей.

Чтобы реализовать эффект, теперь достаточно только изменить прозрачность на 1 (полностью непрозрачный элемент) и вернуть элемент в исходное положение. Таким образом, благодаря указанной задержке, изменение свойств произойдет плавно и вы увидите, как подчеркивание плавно придвигается к ссылке.

Плавное выдвижение ссылки вперед

Это следующий пример. Он отлично подойдет для вертикального меню, в котором нужно реализовать какое-нибудь поведение. Например, можно сделать так, чтобы ссылка немного выдвигалась вперед при наведении. Это очень легко сделать с помощью трансформаций.

а:hover{
	transform: translateX(10px)
}

Базовые стили ссылки не изменяются. Выдвижение можно сделать и сильнее, если захотите.

Увеличение ссылки

а:hover{
	transform: scale(1.2)
}

Даже комментировать не буду, все предельно понятно.

Увеличение длины ссылки

Можно сделать так, чтобы при наведении буквенный интервал становился больше.

а:hover{
	letter-spacing: 10px
}

Медленное появление фонового цвета

Тоже очень просто реализовывается:

а:hover{
	background: yellow
}

У ссылки при наведении постепенно появится желтый фон. Естественно, можно прописать любой цвет

Конечно, это далеко не все эффекты. Пока я рассказал только о самых простых. Как вы понимаете, можно сделать и более продвинутые. Об этом как-то в следующий раз.

Комментариев: 1
  1. Денис

    День добрый. Добавьте, пожалуйста, примеры как это выглядит.

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

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: