Веб-дизайнеру
Веб-разработчику
Дополнительно
CSS круглая кнопка c анимационным фоном
Скачать
Демо
↓ Также Вам будет интересно ↓
В этой статье мы рассмотрим создание нестандартной кнопки, а именно - CSS круглая кнопка с красивым эффектом анимации заднего фона. Единственное, что в эту кнопку не поместится много текста, но при желании этот момент можно доработать. Наша главная задача – это круглая кнопка на CSS3.
Что конкретно мы сделаем? Круглую кнопку со звездой внутри. И конечно, при наведении на неё, мы сделаем анимацию – вращение этой звезды (с небольшим импульсом), а также добавим появление дополнительного текста.
HTML основа
У нас будет три тега span. Последний тег это будет скрытый текст, который показывается при наведении курсора мыши.
|
1 2 3 4 5 |
<a href="#" class="a-btn"> <span></span> <span>Войти</span> <span>Жми сюда</span> </a> |
Вот в принципе и все, с html! переходим к стилям.
CSS
В этом примере, мы будем использовать nth-child. Так как у нас есть 3 тега span, то мы обратимся к ним следующим образом:
.a-btn span:nth-child(1)
.a-btn span:nth-child(2)
.a-btn span:nth-child(3)
Мы делаем кнопку круглой и добавляем некоторые реалистичные тени. Для того, чтобы текст был по центру, мы прописываем вертикальное выравнивание и показывать как табличную ячейку. Картинка звезды и скрытый текст будут позиционироваться абсолютно.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
.a-btn{ width: 120px; height: 120px; border-radius: 50%; display: block; margin: 20px; float: left; background: #f0ad4e; position: relative; box-shadow: 0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff, 0px 0px 1px 8px rgba(188, 188, 188, 0.4), 0px 0px 0px 9px #fff; transition: all 0.3s linear; } .a-btn span{ display: table-cell; width: 80px; height: 80px; padding: 20px; text-align: center; vertical-align: middle; font-size: 26px; color: #fff; text-shadow: 0px 1px 1px #A03F16; font-family: "Arvo", "Myriad Pro", "Trebuchet MS", sans-serif; transition: all 0.3s linear; } .a-btn span:nth-child(1), .a-btn span:nth-child(3){ position: absolute; top: 0px; left: 0px; font-size: 40px; line-height: 36px; opacity: 0; } .a-btn span:nth-child(1){ background: transparent url(../images/star.png) no-repeat center center; opacity: 0.2; } |
При наведении мы будем изменять параметры тени. Скрытый текст, будет затемнен, а первоначальный текст эффектно уёдет внутрь. И создаем эффект вращение звезды:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.a-btn:hover{ background: rgba(170, 77, 27, 0.6); box-shadow: 0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff, 1px 4px 5px 8px rgba(188, 188, 188, 0.6), 0px 0px 0px 9px #fff; } .a-btn:hover span:nth-child(3){ opacity: 1; } .a-btn:hover span:nth-child(2){ transform: scale(0); opacity: 0; } .a-btn:hover span:nth-child(1){ animation: rotate 1s linear; } |
Добавляем небольшой простой эффект нажатой кнопки.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.a-btn:active{ box-shadow: 0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff, 0px -1px 0px 8px rgba(188, 188, 188, 0.3), 0px 0px 0px 10px #fff; } .a-btn:active span:nth-child(2){ color: rgba(170, 77, 27, 0.8); text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.6); } |
И некоторые важные параметры анимации:
|
1 2 3 4 5 |
@-webkit-keyframes rotate{ 0% { transform: scale(1) rotate(0);} 50% { transform: scale(0.5) rotate(180deg);} 100% { transform: scale(1) rotate(360deg);} } |
Вот и готово! Теперь можно немного расслабиться, и успешно использовать круглую кнопочку на своем сайте.
Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока:
Перевел: Владислав Бондаренко
