CSS круглая кнопка c анимационным фоном | Vladmaxi.net
ГлавнаяВеб-разработчикуCSSCSS круглая кнопка c анимационным фоном
Дата: 24.04.2013 в 21:09 | Просмотров: 6206

CSS круглая кнопка c анимационным фоном

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

В этой статье мы рассмотрим создание нестандартной кнопки, а именно - CSS круглая кнопка с красивым эффектом анимации заднего фона. Единственное, что в эту кнопку не поместится много текста, но при желании этот момент можно доработать. Наша главная задача – это круглая кнопка на CSS3.

Что конкретно мы сделаем? Круглую кнопку со звездой внутри. И конечно, при наведении на неё, мы сделаем анимацию – вращение этой звезды (с небольшим импульсом), а также добавим появление дополнительного текста.

HTML основа

У нас будет три тега span. Последний тег это будет скрытый текст, который показывается при наведении курсора мыши.

Вот в принципе и все, с html! переходим к стилям.

CSS

В этом примере, мы будем использовать nth-child. Так как у нас есть 3 тега span, то мы обратимся к ним следующим образом:

.a-btn span:nth-child(1)

.a-btn span:nth-child(2)

.a-btn span:nth-child(3)

Мы делаем кнопку круглой и добавляем некоторые реалистичные тени. Для того, чтобы текст был по центру, мы прописываем вертикальное выравнивание и показывать как табличную ячейку. Картинка звезды и скрытый текст будут позиционироваться абсолютно.

При наведении мы будем изменять параметры тени. Скрытый текст, будет затемнен, а первоначальный текст эффектно уёдет внутрь. И создаем эффект вращение звезды:

Добавляем небольшой простой эффект нажатой кнопки.

И некоторые важные параметры анимации:

Вот и готово! Теперь можно немного расслабиться, и успешно использовать круглую кнопочку на своем сайте.


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


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