Создаем анимированные кнопки при помощи CSS3

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

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

Мы рассмотрим каждый пример и разберем как выглядит их HTML-структура и стили для разных состояний кнопок.

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

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



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

HTML-разметка

Структура довольно проста: иконка изображения и другие элементы в тегах span:



CSS

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



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



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





Второй пример будет очень похож на первый, только мы добавим несколько новых эффектов.

HTML-разметка

Разметка на этом примере будет такой же, как и в первом примере.

CSS

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



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





В этом примере мы попытаемся сделать что-то совершенно другое. Кнопка будет расширяться вниз при наведении и раскрывать еще одно сообщение. Значок стрелки будет слегка вращаться.

HTML-разметка

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



CSS

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



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



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





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

HTML-разметка

Разметка в этом примере такая же, как и в предыдущем.

CSS

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



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





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

HTML-разметка

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



CSS

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



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



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



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





В этом примере мы создадим круглую кнопку со звездочкой в ней. Мы заставим звезду вращаться при наведении курсора (с небольшим импульсом) и сделаем появление дополнительного текста.

HTML-разметка

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



CSS

Мы поиграемся немного с 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. Звезды и скрытый текст будет позиционироваться абсолютно.



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



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



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





В последнем примере мы создадим псевдо 3D-кнопку, использовав некоторые классные тени.

HTML-разметка

Структура будет такая же как и в пятом примере

CSS

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



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



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



Вот и всё! Надеюсь, вам понравилось создание некоторых крэйзи-кнопок при помощи CSS3 и вы получили вдохновение для своих экспериментов!