В наше время почти на каждом сайте можно увидеть красивые кнопки на сайте, с использованием css. В данном уроке мы рассмотрим подборку замечательных анимированных кнопок для сайта с помощью эффектов css. Возможно вы уже не раз встречали подобные кнопки в интернете, но мы не смогли пройти возле них мимо, и решили рассказать нашим пользователям о них. Идея заключается в создании анимированных ссылок с разными стилями, hover-эффектами и прочими. Также мы будем использовать сторонние шрифты с репозитория google.

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

В данных примерах используются иконки с webiconset.com, а также шрифт от Just Be Nice.

И так, начнем рассматривать кнопки, начнем с первого примера.

Пример №1

В этом примере мы создадим большую кнопку с несколькими элементами на ней. Она будет иметь иконку, основной текст, стрелку с правой стороны и цену, которая будет появляться только когда мы наводим курсор. Рассмотрим структуру HTML:

В стилях мы убедимся что переходы установлены правильно для элемента, который мы хотим анимировать при наведении. Цена будет невидимой, установим её прозрачность на 0. Применение множества box-shadow позволит нам создавать реалистичные эффекты:

При наведении мыши на кнопку мы будем менять тень, а также покажем цену и спрячем изображение:

В активном состоянии сделаем кнопку нажатой добавив тень. Значок стрелки справа будет увеличен:

Пример №2

Стили почти такие же, как и в первом примере, мы просто адаптируем цвета. Но мы сделаем другой эффект при наведении. Цена увеличится до исходного размера и иконка исчезнет. Для стрелки изменим цвет фона на красный:

Активное состояние будет таким же, как и в предыдущем примере. Мы будем только изменять цвета. Когда мы нажимаем кнопку, мы будем также поворачивать стрелку:

Пример №3

Разметка в примере 3, будет несколько иной, чем в предыдущих примерах. Текст, который будет скользить вниз, будет в теге span с классом «a-btn-slide-text»:

В нормальном состоянии кнопка будет иметь определенную высоту, мы будем анимировать её при наведении с целью вывода дополнительных сообщений. Дополнительное сообщение «a-btn-slide-text» будет позиционироваться абсолютно и мы будем увеличивать его высоту от 0 до 30 пикселей при наведении.

При наведении мы будем менять высоту кнопки и дополнительный текст. Мы также будем вращать значок стрелки на 45 градусов:

В активном состоянии кнопка будет немного двигаться и изменять цвет, так что кнопка будет казаться нажатой:

Пример №4

В примере 4, мы будем выдвигать дополнительное сообщение, как и в предыдущем примере, но мы сделаем это теперь с правой стороны. Это будет выглядеть как будто кнопка открывает сообщение внутри себя. Стили кнопки будут похожи на предыдущий пример. Мы только изменим цвет и положение дополнительного текста:

При наведении мы увеличим справа padding кнопки, а также ширину тега span с классом «a-btn-slide-text»:

В активном состоянии создадим эффект нажатия при помощи тени:

Пример №5

Структура будет состоять из 4 тегов span внутри ссылки. Span с классом «a-btn-slide-icon» будет анимировать стрелку, она будет двигаться сверху вниз.

Поскольку мы будем использовать шрифт для отображения иконки с левой стороны, мы должны будем подключить этот шрифт. Мы будем скрывать стрелку, установив её значение top равным -30px.

При наведении мы будем прятать значок слева и бесконечно проигрывать анимацию для стрелки:

При нажатии на кнопку мы сделаем её красной и создадим эффект нажатия добавив тень:

И, наконец, простая анимация для перемещения стрелки сверху вниз:

Пример №6

У нас будет три тега span в нашей кнопке-ссылке. В последнем будет скрытый текст, который показывается при наведении.

Мы поиграемся немного с nth-child в этом примере. Так как у нас есть 3 тега span, мы будем обращаться к ним так: .a-btn span:nth-child(1), .a-btn span:nth-child(2) and .a-btn span:nth-child(3).

Мы сделаем кнопки круглыми и добавим необычные тени к ним. Для того, чтобы отцентрировать основной текст по вертикали, мы установим display равным table-cell. Звезды и скрытый текст будет позиционироваться абсолютно.

При наведении мы будем менять тень кнопки так, что она кажется поднятой. Скрытый текст будет проявляться, и мы применим анимацию для начального текста. Мы также применим анимацию вращения для звезды:

Теперь сделаем кнопку якобы нажатой при нажатии на нее:

Анимация вращения/пульсации выглядит следующим образом:

Пример №7

Стиль будет также очень похож на пример 5, мы просто изменим некоторые цвета и тени:

При наведении мы будем увеличивать кнопку и вращать маленькую иконку:

При нажатии на кнопку, мы сделаем кнопку меньше и нажав на неё, изменим тень:

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