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

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

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

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

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

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

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

HTML-код

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

CSS-код

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

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

.callback-bt:hover {
    background: #fff;
    border: 2px solid #38a3fd;
}

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

.callback-bt .text-call:after {
    content: "\f095";
    display: block;
    font-family: fontawesome;
    color: #fff;
    font-size: 38px;
    line-height: 75px;
    height: 75px;
    width: 75px;
    opacity: 1;
    transition: .3s ease-in-out;
    animation: 1200ms ease 0s normal none 1 running shake;
    animation-iteration-count: infinite;
}

.callback-bt .text-call:hover:after {
    opacity: 0;
}

.callback-bt .text-call span {
    color: #38a3fd;
    display: block;
    left: 50%;
    top: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    opacity: 0;
    font-size: 11px;
    line-height: 12px;
    font-weight: 600;
    text-transform: uppercase;
    transition: .3s ease-in-out;
    font-family: 'montserrat', Arial, Helvetica, sans-serif;
}

.callback-bt .text-call:hover span {
    opacity: 1;
}

@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);
    }
}
/* конец кнопки звонка */

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

HTML-код

<div class="email-bt">
   <div class="text-call">
      <span>Обратная<br>связь</span>
   </div>
</div>

CSS-код

/*кнопка обратной связи*/
.email-bt {
    background: #F95C18;
    border-radius: 50%;
    box-shadow: 0 8px 10px rgba(249, 92, 24, 0.3);
    cursor: pointer;
    border: 2px solid transparent;
    display: block;
    height: 75px;
    width: 75px;
    text-align: center;
    position: fixed;
    left: 8%;
    bottom: 18%;
    z-index: 999;
    transition: .3s ease-in-out;
    -webkit-animation: email-an linear 1s infinite;
    animation: email-an linear 1s infinite;
}

.email-bt:hover {
    background: #fff;
    border: 2px solid #F95C18;
}

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

.email-bt .text-call:after {
    content: "\f0e0";
    display: block;
    font-family: fontawesome;
    color: #fff;
    font-size: 34px;
    line-height: 75px;
    height: 75px;
    width: 75px;
    opacity: 1;
    transition: .3s ease-in-out;
    -webkit-animation: opsimple 3s infinite;
    animation: opsimple 3s infinite;
}

.email-bt .text-call:hover:after {
    opacity: 0;
}

.email-bt .text-call span {
    color: #F95C18;
    display: block;
    left: 50%;
    top: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 1;
    opacity: 0;
    font-size: 11px;
    line-height: 12px;
    font-weight: 600;
    text-transform: uppercase;
    transition: .3s ease-in-out;
    font-family: 'montserrat', Arial, Helvetica, sans-serif;
}

.email-bt .text-call:hover span {
    opacity: 1;
}

@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;
        transform: rotate(0deg);
    }

    40% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: rotate(360deg);
    }
}
/* конец кнопки звязи */

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

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

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

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

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

      <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 может поможет.

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

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

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

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

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

  6. Добрый день!

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

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

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

    1. День добрый.

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

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

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

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

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

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

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

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

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

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

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

Оставить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *