Кнопка анимация на CSS3 с открывающимся описанием | Vladmaxi.net
ГлавнаяВеб-разработчикуCSSКнопка анимация на CSS3 с открывающимся описанием
Дата: 23.04.2013 в 22:22 | Просмотров: 2546

Кнопка анимация на CSS3 с открывающимся описанием

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

Сегодня у нас на очереди кнопка анимация, с красивым и современным эффектом выезжающего описания. Один из примеров красивой анимации можно увидеть здесь в статье “Эффектные кнопки CSS3 с анимацией иконок”. В данном случае все просто, и для создания анимации, мы не будем загружать её всякими скриптами. Почему? Потому, что на сегодняшний день, все это реально сделать с помощью все лишь одного CSS3. Как? А вот сейчас и рассмотрим это подробнее.

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

HTML код

Все просто!

CSS стили

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

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

И в конце добавим некоторые эффекты нажатия с помощью тени:

Вот теперь у Вас должно что-то получится, а именно кнопка анимация. Если нет, то скачивайте исходники, и применяйте. Надеюсь эта кнопка Вам пригодится! :)


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


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