Кнопка для сайта CSS3 + анимация загрузки | Vladmaxi.net
ГлавнаяВеб-разработчикуCSSКнопка для сайта CSS3 + анимация загрузки
Дата: 23.04.2013 в 23:06 | Просмотров: 3015

Кнопка для сайта CSS3 + анимация загрузки

Кнопка для сайта CSS3
Скачатьбесплатно с сервера
Демодемонстрация

В данной статье Вы можете наглядно увидеть, как создавать красивую кнопку или можете скачать готовый пример, с готовым кодом и стилями. Кнопка для сайта CSS3 с красивой анимацией, подойдет практически для любого ресурса (например для сервиса загрузок, или чего другого). Создание схожей кнопки, только с уклоном в сторону 3D, вы можете найти в статье “Современная 3D красивая кнопка CSS”.
Также в этом примере мы будем использовать шрифт, с подбором красивых иконок. Вообще замысел состоит в том, чтобы отображаемый значок исчезал при наведении и появлялась стрелка, которая двигается сверху вниз. И как обычно, начнем с html кода.

HTML

Структура кнопки включает в себя 4 элемента span, внутри ссылки. Тег span, с классом a-btn-slide-icon, будет использован для создания анимации стрелки, двигающееся сверху вниз.

CSS

Так как мы будем использовать шрифт для создания иконок, то нам необходимо подключить его. Скачать шрифт Вы можете вместе с исходниками. Стрелку мы спрячем, установив её верхнее значение до 30px.

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

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

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

Вот все и готово! Как видите, ничего сложного или сверхъестественного здесь нет. Пользуйтесь!


Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока: http://tympanus.net/codrops/2011/11/07/animated-buttons-with-css3/
Перевел: Владислав Бондаренко


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