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

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

Содержание

Если вам нужна красивая кнопка телефона на сайт, чтобы по клику на неё можно было оставить номер для обратного звонка, то вы попали по адресу. Сегодня разберем, как легко можно сделать анимированную кнопку телефона без помощи плагинов и платных сервисов. Данный способ подойдёт для сайта на любом движке. Как это всё делается, покажем на примере сайта под управлением 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.

установка кнопки телефона на wordpress

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

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

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

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

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

6 ответов

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

    1. Для этого вместо # используется код href="tel:+79991112233"и так далее...

  2. Здравствуйте! Может Вы сможете помочь, поскольку у Вас есть раздел по работе с Elementor.
    Сделал примерно такую кнопку, как описано выше в статье, но вместо ссылки на телефон взял ссылку на созданный попап (созданный в том же Elementor и примерно такого же содержания, как у Вас при клике на кнопку обратной связи). Добавил ее на страницу и...
    Проблема в том, что или сразу или со временем кнопка становится неактивной. При наведении курсора видно, что под ним есть нужная ссылка, но клика, как такового нет.
    Эта же ссылка, поставленная на любой объект внутри страницы работает великолепно. А после позиионирования все волшебство пропадает. Причем делал позиионирование, как с помощью самого Elementor, так и прописывал вручную, как сделано в Вашем случае. Не хотят работать такие кнопки со ссылками на Popup в Elementor.
    Пришлось утереться и прописать tel:+7... В этом случае никаких проблем нет.
    Может у Вас есть подобный опыт или подскажете в чем может быть причина?

    1. Здравствуйте! В связке с Elementor тоже всё прекрасно работает (как с Pro версией, так и со сторонними popup ). Сложно сказать с чем связана ваша проблема не видя, как и что реализовано.

  3. Кнопка не работает, вставил номер телефона в href

    он не открывает номер на телефоне

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

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