Кнопки для интернет магазина + анимация на CSS3! | Vladmaxi.net
ГлавнаяВеб-разработчикуCSSКнопки для интернет магазина + анимация на CSS3!
Дата: 22.04.2013 в 14:29 | Просмотров: 4162

Кнопки для интернет магазина + анимация на CSS3!

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

Аналог кнопок на CSS3, которые мы создавали в статье “Эффектные кнопки CSS3 с анимацией иконок”, только немного видоизмененный дизайн, и другой эффект анимации. Эти кнопки для интернет магазина, созданы на основе последних технологий CSS3.

HTML

Стандартная структура кнопки:

Текст кнопки можно легко переписать, изменив его в соответствующих строках.

CSS стили

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

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

Вот и кнопка готова, и Вы можете преобразить свой интернет магазин (или просто сайт), красивой, анимационной кнопочкой!

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


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