Эффектные кнопки CSS3 с анимацией иконок | Vladmaxi.net
ГлавнаяВеб-разработчикуCSSЭффектные кнопки CSS3 с анимацией иконок
Дата: 22.04.2013 в 13:43 | Просмотров: 4120

Эффектные кнопки CSS3 с анимацией иконок

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

В этом примере мы создадим большие кнопки CSS3, со все необходимой информацией внутри. Особенно они могут быть полезны для интернет магазина. Аналогичный пример кнопок в статье “Кнопки для интернет магазина + анимация на CSS3!”. Кнопка будет иметь иконку, основной текст, стрелки на правой стороне и цену, которая появится только, при наведении.

HTML разметка

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

CSS стили кнопки

В стилях мы пропишем всё необходимое, чтобы создать правильный эффект анимации при наведении курсора мыши. Изначально цена будет невидима, поэтому установим ей прозрачность opacity до 0. Для создания более реалистичного эффекта будем использовать тень box-shadow:

При наведении hover на кнопку мы показываем цену и эффектно убираем изображение:

При нажатии active будет применена внутренняя тень, как-будто элемент вдавлен. Стрелка справа будет увеличена:

Эти кнопки CSS3 реализованы и Вы можете свободно их использовать у себя на сайте! Приятного дня!

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


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