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

 

Для начала нам необходимо определить контейнеры, содержащие эти ссылки:

Эффект достигается только средствами CSS

Рассмотрим стили CSS, здесь использованы функции трансформации каждого браузера. Время трансформации установлено на 250 миллисекунд, а масштабирование/вращение определяется установками по умолчанию. Состояние hover изменяет цвет фона (скруглённые углы усиливают эффект)

В результате мы получаем стильные ссылки, которые при наведении курсора немного вращаются, улучшая стиль сайта!