Креативные hover-эффекты для иконок сайта | RUDEBOXЗачастую вам на сайте приходится разрабатывать различные эффекты для кнопок, это позволяет привлечь взор посетителя красивой анимацией к необходимому пункту. В данном уроке мы рассмотрим, как можно реализовать такие действия  помощью hover-эффектов.  Идея заключается в том, чтобы создать креативный и стильный hover эффект, используя CSS переходы и анимацию с псевдо-элементами. Для иконок мы будем использовать шрифт Eco Ico by Matthew Skiles, созданный при помощи IcoMoon, который мы будем устанавливать при помощи класса :before.

Мы рассмотрели девять примеров, все они достаточно схожи в построении, и так, давайте более детально рассмотрим процесс создания.

Шаг 1. HTML

Для начала нам необходимо создать простую разметку, мы будем использовать якори для иконок:

Разметка в примерах схожа, для изменения кнопок и эффекта нам необходимо изменить классы.

Креативные hover-эффекты для иконок сайта | RUDEBOX

Шаг 2. CSS

Мы рассмотрим самый простой пример hover эффекта — вращение псевдо-элемента иконки:

Следует обратить ваше внимание, что пунктирная рамка на круглом псевдо-элементе (border-radius: 50%) не работает в FF 21,0 (эффект 4).

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Читайте также: