Жёлтая кнопка CSS3 с описанием | Vladmaxi.net
ГлавнаяВеб-разработчикуCSSЖёлтая кнопка CSS3 с описанием
Дата: 23.04.2013 в 15:19 | Просмотров: 4034

Жёлтая кнопка CSS3 с описанием

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

Что делать, если необходимо создать кнопку с описанием, а места для неё, ну очень мало. Что мы создадим? Это будет кнопка CSS3 с открывающимся вниз описанием при наведении.  При этом значок стрелки, будет слегка повернут на 45 градусов. Кнопка создана с применением классных анимационных эффектов, которые возможно реализовать с помощью CSS3. В другой статье, также приводится способ красивого оформления кнопки CSS с выезжающим текстом вправо.

HTML разметка

Текст, который будет выезжать вниз при наведении, имеет класс a-btn-slide-text. Сама же структура кнопки следующий вид:

CSS

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

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

Во время нажатия, кнопка CSS3 будет немного двигаться. Также мы настроим цвета так, чтобы был эффект нажатия, т.е. казалось, что она нажата.

И вот, наша кнопка готова! Можете смело ставить её на свой сайт.

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


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