Анимированная кнопка телефона для сайта

Если вам нужна красивая кнопка телефона на сайт, чтобы по клику на неё можно было оставить номер для обратного звонка, то вы попали по адресу. Сегодня разберем, как легко можно сделать анимированную кнопку телефона без помощи плагинов и платных сервисов. Данный способ подойдёт для сайта на любом движке. Как это всё делается, покажем на примере сайта под управлением CMS WordPress.

HTML и CSS код кнопки телефона

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

HTML код:

<div class="phone-button"><a href="#" title="Обратный звонок"><i class="fa fa-phone-alt"></i></a></div>

CSS код:

.phone-button {
    position: fixed;
    right: 13px;
    bottom: 90px;
    transform: translate(-50%, -50%);
    background: #5bc0de;
    border-radius: 50%;
    width: 55px;
    height: 55px;
    color: #fff;
    text-align: center;
    line-height: 55px;
    font-size: 30px;
    z-index: 9999;
}
.phone-button a {
    color: #fff;
}
.phone-button:before,
.phone-button:after {
    content: " ";
    display: block;
    position: absolute;
    border: 50%;
    border: 1px solid #5bc0de;
    left: -20px;
    right: -20px;
    top: -20px;
    bottom: -20px;
    border-radius: 50%;
    animation: animate 1.5s linear infinite;
    opacity: 0;
    backface-visibility: hidden; 
}
.phone-button:after{
    animation-delay: .5s;
}
.phone-button i {
        color:#fff;
        transition:.3s;
        animation: 1200ms ease 0s normal none 1 running shake;
        animation-iteration-count: infinite;
}
@keyframes animate
{
    0%
    {
        transform: scale(0.5);
        opacity: 0;
    }
    50%
    {
        opacity: 1;
    }
    100%
    {
        transform: scale(1.2);
        opacity: 0;
    }
}
@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);
}
}

CSS стили для мобильной версии:

Если нужно прописать отдельные стили для мобильных устройств, то добавьте в CSS следующий код.

@media (max-width : 800px) {  
.phone-button {   
    bottom: 5px; /*отступ кнопки снизу от экрана*/
    left: 70px; /*отступ кнопки слева от экрана(right - справа)*/
  }
}

Подобным образом можно сделать Whatsapp кнопку для сайта.

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

Настройка всплывающей формы обратного звонка

Теперь к этой кнопке нужно привязать всплывающую форму, для заполнения заявки на обратный звонок. Сделать это можно разными способами, например с помощью плагина Popup Maker для WordPress. Устанавливаем плагин, создаём в нём нужную форму и копируем класс этой формы.

Далее добавляем этот класс к нашему коду и получаем слкдующее:

<div class="phone-button popmake-2330"><a href="#" title="Обратный звонок"><i class="fa fa-phone-alt"></i></a></div>

Установка кнопки на WordPress

В панели управления WordPress зайдите в раздел "внешний вид/редактор тем". После, заходим в нужные файлы и вносим правки. HTML код обычно прописывают в файл footer.php (перед тегом </body>), а код CSS в файле style.css.

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

Для добавления HTML кода подойдёт плагин DCO Insert Analytics Code, а для CSS используйте плагин SiteOrigin CSS или Custom CSS.

WordPress плагин кнопки телефона

Для тех, кто не хочет разбираться с кодом, я разработал простой и быстрый WordPress плагин Sticky Contact Button. С его помощью вы сможете легко установить на свой сайт кнопку телефона, Telegram, WhatsApp, или Viber. В настройках можно менять вид кнопки и выбирать разные варианты анимации.

Ссылка на плагин Sticky Contact Button