Круглая кнопка (обратного звонка) CSS с анимацией

HTML и CSS WordSmall

Коммерция, коммерция и еще раз коммерция! Именно это направление сегодня активно набирает обороты в сайтостроении. И для сайтов такой тематики (впрочем, как и для всех остальных) важную роль играет юзабилити. Чтобы на сайте все было удобно, доступно и понятно любому пользователю. Одним из элементов этой концепции является кнопка «Заказ обратного звонка».

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

Заказ обратного звонка

Посмотреть Демо

Для примера создадим две кнопки с разной анимацией. В качестве иконок используем всем известный шрифт Font Awesome.

Кнопка заказа звонка

HTML-код

<div type="button" class="callback-bt">
    <div class="text-call">
        <i class="fa fa-phone"></i>
        <span>Заказать<br>звонок</span>
    </div>
</div>

CSS-код

/*кнопка звонка*/

.callback-bt {
        background:#38a3fd;
        border:2px solid #38a3fd;
        border-radius:50%;
        box-shadow:0 8px 10px rgba(56,163,253,0.3);
        cursor:pointer;
        height:68px;
        text-align:center;
        width:68px;
        position: fixed;
        right: 8%;
        bottom: 18%;
        z-index:999;
        transition:.3s;
        -webkit-animation:hoverWave linear 1s infinite;
        animation:hoverWave linear 1s infinite;
}

.callback-bt .text-call{
        height:68px;
        width:68px;        
        border-radius:50%;
        position:relative;
        overflow:hidden;
}

.callback-bt .text-call span {
    text-align: center;
    color:#38a3fd;
    opacity: 0;
    font-size: 0;
        position:absolute;
        right: 4px;
        top: 22px;
    line-height: 14px;
        font-weight: 600;
    text-transform: uppercase;
    transition: opacity .3s linear;
    font-family: 'montserrat', Arial, Helvetica, sans-serif;
}

.callback-bt .text-call:hover span {
    opacity: 1;
        font-size: 11px;
}
.callback-bt:hover i {
    display:none;
}

.callback-bt:hover {
        z-index:1;
        background:#fff;
        color:transparent;
        transition:.3s;
}
.callback-bt:hover i {
        color:#38a3fd;
        font-size:40px;
        transition:.3s;
}
.callback-bt i {
        color:#fff;
        font-size:34px;
        transition:.3s;
        line-height: 66px;transition: .5s ease-in-out;
}

.callback-bt i  {
    animation: 1200ms ease 0s normal none 1 running shake;
        animation-iteration-count: infinite;
        -webkit-animation: 1200ms ease 0s normal none 1 running shake;
        -webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes hoverWave {
        0% {
        box-shadow:0 8px 10px rgba(56,163,253,0.3),0 0 0 0 rgba(56,163,253,0.2),0 0 0 0 rgba(56,163,253,0.2)
}
40% {
        box-shadow:0 8px 10px rgba(56,163,253,0.3),0 0 0 15px rgba(56,163,253,0.2),0 0 0 0 rgba(56,163,253,0.2)
}
80% {
        box-shadow:0 8px 10px rgba(56,163,253,0.3),0 0 0 30px rgba(56,163,253,0),0 0 0 26.7px rgba(56,163,253,0.067)
}
100% {
        box-shadow:0 8px 10px rgba(56,163,253,0.3),0 0 0 30px rgba(56,163,253,0),0 0 0 40px rgba(56,163,253,0.0)
}
}@keyframes hoverWave {
        0% {
        box-shadow:0 8px 10px rgba(56,163,253,0.3),0 0 0 0 rgba(56,163,253,0.2),0 0 0 0 rgba(56,163,253,0.2)
}
40% {
        box-shadow:0 8px 10px rgba(56,163,253,0.3),0 0 0 15px rgba(56,163,253,0.2),0 0 0 0 rgba(56,163,253,0.2)
}
80% {
        box-shadow:0 8px 10px rgba(56,163,253,0.3),0 0 0 30px rgba(56,163,253,0),0 0 0 26.7px rgba(56,163,253,0.067)
}
100% {
        box-shadow:0 8px 10px rgba(56,163,253,0.3),0 0 0 30px rgba(56,163,253,0),0 0 0 40px rgba(56,163,253,0.0)
}
}

/* animations icon */

@keyframes shake {
0% {
    transform: rotateZ(0deg);
        -ms-transform: rotateZ(0deg);
        -webkit-transform: rotateZ(0deg);
}
10% {
    transform: rotateZ(-30deg);
        -ms-transform: rotateZ(-30deg);
        -webkit-transform: rotateZ(-30deg);
}
20% {
    transform: rotateZ(15deg);
        -ms-transform: rotateZ(15deg);
        -webkit-transform: rotateZ(15deg);
}
30% {
    transform: rotateZ(-10deg);
        -ms-transform: rotateZ(-10deg);
        -webkit-transform: rotateZ(-10deg);
}
40% {
    transform: rotateZ(7.5deg);
        -ms-transform: rotateZ(7.5deg);
        -webkit-transform: rotateZ(7.5deg);
}
50% {
    transform: rotateZ(-6deg);
        -ms-transform: rotateZ(-6deg);
        -webkit-transform: rotateZ(-6deg);
}
60% {
    transform: rotateZ(5deg);
        -ms-transform: rotateZ(5deg);
        -webkit-transform: rotateZ(5deg);
}
70% {
    transform: rotateZ(-4.28571deg);
        -ms-transform: rotateZ(-4.28571deg);
        -webkit-transform: rotateZ(-4.28571deg);
}
80% {
    transform: rotateZ(3.75deg);
        -ms-transform: rotateZ(3.75deg);
        -webkit-transform: rotateZ(3.75deg);
}
90% {
    transform: rotateZ(-3.33333deg);
        -ms-transform: rotateZ(-3.33333deg);
        -webkit-transform: rotateZ(-3.33333deg);
}
100% {
    transform: rotateZ(0deg);
        -ms-transform: rotateZ(0deg);
        -webkit-transform: rotateZ(0deg);
}
}

@-webkit-keyframes shake {
0% {
    transform: rotateZ(0deg);
        -ms-transform: rotateZ(0deg);
        -webkit-transform: rotateZ(0deg);
}
10% {
    transform: rotateZ(-30deg);
        -ms-transform: rotateZ(-30deg);
        -webkit-transform: rotateZ(-30deg);
}
20% {
    transform: rotateZ(15deg);
        -ms-transform: rotateZ(15deg);
        -webkit-transform: rotateZ(15deg);
}
30% {
    transform: rotateZ(-10deg);
        -ms-transform: rotateZ(-10deg);
        -webkit-transform: rotateZ(-10deg);
}
40% {
    transform: rotateZ(7.5deg);
        -ms-transform: rotateZ(7.5deg);
        -webkit-transform: rotateZ(7.5deg);
}
50% {
    transform: rotateZ(-6deg);
        -ms-transform: rotateZ(-6deg);
        -webkit-transform: rotateZ(-6deg);
}
60% {
    transform: rotateZ(5deg);
        -ms-transform: rotateZ(5deg);
        -webkit-transform: rotateZ(5deg);
}
70% {
    transform: rotateZ(-4.28571deg);
        -ms-transform: rotateZ(-4.28571deg);
        -webkit-transform: rotateZ(-4.28571deg);
}
80% {
    transform: rotateZ(3.75deg);
        -ms-transform: rotateZ(3.75deg);
        -webkit-transform: rotateZ(3.75deg);
}
90% {
    transform: rotateZ(-3.33333deg);
        -ms-transform: rotateZ(-3.33333deg);
        -webkit-transform: rotateZ(-3.33333deg);
}
100% {
    transform: rotateZ(0deg);
        -ms-transform: rotateZ(0deg);
        -webkit-transform: rotateZ(0deg);
}
}
/* конец кнопки звонка */

Кнопка обратной связи

HTML-код

<div type="button" class="email-bt">
    <div class="text-call">
        <i class="fa fa-envelope" aria-hidden="true"></i>
        <span>Обратная<br>связь</span>
    </div>
</div>

CSS-код

/*кнопка обратной связи*/

.email-bt {
        background:#F95C18;
        border:2px solid #F95C18;
        border-radius:50%;
        box-shadow:0 8px 10px rgba(249,92,24,0.3);
        cursor:pointer;
        height:68px;
        text-align:center;
        width:68px;
        position: fixed;
        left: 8%;
        bottom: 18%;
        z-index:999;
        transition:.3s;
        -webkit-animation:email-an linear 1s infinite;
        animation:email-an linear 1s infinite;
}

.email-bt .text-call{
        height:68px;
        width:68px;        
        border-radius:50%;
        position:relative;
        overflow:hidden;
}

.email-bt .text-call span {
    text-align: center;
    color:#F95C18;
    opacity: 0;
    font-size: 0;
        position:absolute;
        right: 4px;
        top: 22px;
    line-height: 14px;
        font-weight: 600;
    text-transform: uppercase;
    transition: opacity .3s linear;
    font-family: 'montserrat', Arial, Helvetica, sans-serif;
}

.email-bt .text-call:hover span {
    opacity: 1;
        font-size: 11px;
}
.email-bt:hover i {
    display:none;
}

.email-bt:hover {
        z-index:1;
        background:#fff;
        transition:.3s;
}
.email-bt:hover i {
        color:#38a3fd;
        font-size:40px;
        transition:.3s;
}
.email-bt i {
        color:#fff;
        font-size:29px;
        transition:.3s;
        line-height: 66px;
}

.email-bt i  {
        -webkit-animation: opsimple 3s infinite;
        animation: opsimple 3s infinite;
}

@-webkit-keyframes email-an {
        0% {
        box-shadow:0 8px 10px rgba(249,92,24,0.3),0 0 0 0 rgba(249,92,24,0.2),0 0 0 0 rgba(249,92,24,0.2)
}
40% {
        box-shadow:0 8px 10px rgba(249,92,24,0.3),0 0 0 15px rgba(249,92,24,0.2),0 0 0 0 rgba(249,92,24,0.2)
}
80% {
        box-shadow:0 8px 10px rgba(249,92,24,0.3),0 0 0 30px rgba(249,92,24,0),0 0 0 26.7px rgba(249,92,24,0.067)
}
100% {
        box-shadow:0 8px 10px rgba(249,92,24,0.3),0 0 0 30px rgba(249,92,24,0),0 0 0 40px rgba(249,92,24,0.0)
}
}@keyframes email-an {
        0% {
        box-shadow:0 8px 10px rgba(249,92,24,0.3),0 0 0 0 rgba(249,92,24,0.2),0 0 0 0 rgba(249,92,24,0.2)
}
40% {
        box-shadow:0 8px 10px rgba(249,92,24,0.3),0 0 0 15px rgba(249,92,24,0.2),0 0 0 0 rgba(249,92,24,0.2)
}
80% {
        box-shadow:0 8px 10px rgba(249,92,24,0.3),0 0 0 30px rgba(249,92,24,0),0 0 0 26.7px rgba(249,92,24,0.067)
}
100% {
        box-shadow:0 8px 10px rgba(249,92,24,0.3),0 0 0 30px rgba(249,92,24,0),0 0 0 40px rgba(249,92,24,0.0)
}
}

@keyframes opsimple {
0% {
    opacity: 0;
}
40% {
    opacity: 1;
}

80% {
    opacity: 1;
}
100% {
    opacity: 0;
}
}

@-webkit-keyframes opsimple {
0% {
    opacity: 0;
}
40% {
    opacity: 1;
}
80% {
    opacity: 1;
}
100% {
    opacity: 0;
}
}
/* конец кнопки звязи */

Как видите, все очень просто. Удачной реализации, уважаемый читатель!

Автор, он же Андрей, он же Admin, он же WordSmall

Лентяй-любитель, окончил высшую школу безделья с многочисленными знаками отличия. Создатель этого небольшого «чудо-блога» о еще более «чудном» контенте.

E-mail Google+ Twitter
Комментариев: 41
  • Ирина
    Ответить

    Здравствуйте, а где можно получить скрипт? Я установила кнопки, но они мертвые. Я хочу реализовать прямой набор номера при нажатии на трубку, указываю ссылку на номер, и ничего не получается.

    • WordSmall
      Ответить

      День добрый. Какой скрипт? Что значит «мертвые»? Каким образом указываете ссылку?

  • Ирина
    Ответить

    Андрей, не удивляйтесь моей терминологии, я гуманитарий, я не спец в компьютерах. Я пытаюсь добавить Ваши кнопки в шаблон Bootstrep и прикрепить к ним форму обратной связи и прямой звонок на телефон. Я добавила Ваши кнопки на сайт. Они очень красивые, но как их активировать и что-то прикрепить к ним, я не знаю. Объясните, пожалуйста, для таких, как я (которые в танке и в каске).

    • WordSmall
      Ответить

      Прямой звонок...ссылку на номер? Вот так: 

      <div type="button" class="callback-bt">
    <a href="tel: 8 888 888 88 88" rel="nofollow">
        <div class="text-call">
                <i class="fa fa-phone"></i>
                <span>Заказать<br>звонок</span>
        </div>
        </a>
</div>

      А модальное окно... просто добавьте тот класс или id к кнопке, который должен вызывать модальное окно.

      Вот я делал пример wordsmall.ru/sajtostroeni...tnoj-svyazi.html может поможет.

  • Alix
    Ответить

    Здравствуйте, WordSmall! Спасибо, поставил на свой сайт кнопку заказа обратного звонка по инструкции выше. Но у меня проблемка: в примере Вашем вверху страницы на голубом фоне кружочек с трубочкой в центре, создав же на сайте HTML и CSS, я получил кружочек с диковинным прямоугольничком в центре. Прошу пояснить, как мне получить желанную телефонную трубку? Спасибо Вам!

    • WordSmall
      Ответить

      День добрый. В статье сказано "В качестве иконок используем всем известный шрифт Font Awesome. " и в комментариях говорилось.

  • Alix
    Ответить

    Здравствуйте ещё раз! Да, всё оказалось проще, чем я думал. Использовав , поменял внешний вид кнопки на возжеланную телефонную трубку. Осталась вторая проблема и буду весьма признателен, если намекнёте на её решение. Но спасибо в любом случае, разумеется...

    Итак, в чём сложность: ваяя свой сайт в Gridbox'е, хочу сделать так, чтоб по клику на любезно предоставленную Вами кнопку открывалась форма. Для этого использую Overlay section, сложность в том, что привязать существующую форму вроде как могу лишь либо к картинке, либо к иконке — судя по опциям Overlay section. А вот как форму привязать к Вашей кнопке-то? Не соображу. Не посоветуете ли чего, добрый человек? :)

  • WordSmall
    Ответить

    Добрый... Привязать к иконке? Имеется в виду картинка или класс элемента, иконка шрифта и т.д. (здесь нужно точность)? Если класс, можно так попробовать .callback-bt .fa-phone

  • Alix
    Ответить

    Добрый день!

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

    Могу ли я сделать так, чтоб кнопка отображалась на всех включая хоумпейдж ЗА ИСКЛЮЧЕНИЕМ одной страницы (контакты) и как я могу это сделать?

    Заранее благодарю!

    • WordSmall
      Ответить

      День добрый.

      <?php if (! is_page( 9 ) ) {?>
тут код кнопки                
<?php } ?>

      9 — это ID страницы

  • Alix
    Ответить

    Спасибо большое за подсказку...

  • Николай
    Ответить

    Когда кликаешь по кнопке на мобильном — все нормально, но когда наводишь курсор мыши на экране монитора компьютера — не везде срабатывает клик. Если кликаешь по тексту, получается, если курсор поднять чуть выше текста, уже не срабатывает. (ничего не происходит). Это как то можно исправить? Хочется, чтобы все идеально работало. Не хочется терять посетителя сайта, если он поднял курсор в пределах круга кнопки, но выше текста.

    • WordSmall
      Ответить

      Вы к кнопке привязали модальное окно? Привязывайте к первому блоку <div type="button" class="callback-bt"> и должно быть нормально

      • Николай

        Я к тексту кнопки привязал ссылку на другую страницу, после чего наблюдал описанные проблемы. Заменил текст прозрачной картинкой. Стало лучше, но не идеально. Решил посоветоваться. прежде чем изобретать велосипед.

      • WordSmall

        Тогда весь код оберните ссылкой. Тогда должно быть все нормально.

      • Николай

        Уже разобрался и нашел причину. Ссылку привязывал в div class="text-call", а когда привязал к div type="button" , то все заработало.

  • Sergey
    Ответить

    Работает хорошо во всех браузерах даже на Edge (проверял на 5 шт.)

    Но кнопки не совместимы с фреймворком Bootstrap 4.3.1

    Видимо перебиваются стили CSS

    Что-то с border-radius — не стал разбираться

    • WordSmall
      Ответить

      Спасибо за наводку. Будет время, посмотрю что там не так.

  • WordSmall
    Ответить

    С подключением Bootstrap 4.3.1 все нормально, нет никаких проблем.

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