Перейти к содержимому
BIS Arts
  • Услуги
    • Создание сайта под ключ
    • Одностраничный лендинг-сайт
    • Многостраничный сайт
    • Интернет-магазин
    • Обслуживание и доработки сайта
    • Разработка логотипа
  • Уроки
  • Портфолио
  • Отзывы
  • Контакты
  • Услуги
    • Создание сайта под ключ
    • Одностраничный лендинг-сайт
    • Многостраничный сайт
    • Интернет-магазин
    • Обслуживание и доработки сайта
    • Разработка логотипа
  • Уроки
  • Портфолио
  • Отзывы
  • Контакты
Whatsapp Telegram-plane
+7(900)247-59-69
Главная / Уроки / Сайтостроение / Кнопка whatsapp для сайта

WhatsApp кнопка для сайта с анимацией

  • 15 мая, 2020
  • 33 комментов
whatsapp кнопка
Содержание

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

Ссылка для перехода в Whatsapp

Для начала рассмотрим, как выглядит ссылка на чат в Whatsapp для сайта.

https://api.whatsapp.com/send?phone=79000000000

А вот она в виде HTML кода:

<a href="https://api.whatsapp.com/send?phone=79000000000" target="_blank" title="Написать в Whatsapp" rel="noopener noreferrer"></a>

Вместо phone=79260000000 вставляем нужный номер

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

Кнопка Whatsapp в углу экрана с анимацией

кнопка whatsapp для сайта

Первый вариант кнопки whatsapp для сайта делается довольно просто и её легко отредактировать, если вам понадобится поменять цвет или размеры.

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

HTML код:

<a href="https://api.whatsapp.com/send?phone=79000000000" target="_blank" title="Написать в Whatsapp" rel="noopener noreferrer"><div class="whatsapp-button"><i class="fa fa-whatsapp"></i></div></a>

CSS код:

.whatsapp-button {
    position: fixed;
    right: 13px;
    bottom: 90px;
    transform: translate(-50%, -50%);
    background: #25D366; /*цвет кнопки*/
    border-radius: 50%;
    width: 55px; /*ширина кнопки*/
    height: 55px; /*высота кнопки*/
    color: #fff;
    text-align: center;
    line-height: 53px; /*центровка иконки в кнопке*/
    font-size: 35px; /*размер иконки*/
    z-index: 9999;
}
.whatsapp-button a {
    color: #fff;
}
.whatsapp-button:before,
.whatsapp-button:after {
    content: " ";
    display: block;
    position: absolute;
    border: 50%;
    border: 1px solid #25D366; /*цвет анимированных волн от кнопки*/
    left: -20px;
    right: -20px;
    top: -20px;
    bottom: -20px;
    border-radius: 50%;
    animation: animate 1.5s linear infinite;
    opacity: 0;
    backface-visibility: hidden; 
}
 
.whatsapp-button:after{
    animation-delay: .5s;
}
 
@keyframes animate
{
    0%
    {
        transform: scale(0.5);
        opacity: 0;
    }
    50%
    {
        opacity: 1;
    }
    100%
    {
        transform: scale(1.2);
        opacity: 0;
    }
}

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

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

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

Кнопка Whatsapp - вариант 2

кнопка с ссылкой на чат whatsapp

Данная кнопка имеет более сложную анимацию и эффект появления надписи при наведении.

HTML код:

<a href="https://api.whatsapp.com/send?phone=79260000000" target="_blank" rel="noopener noreferrer"><div type="button" class="whatsapp-button"><div class="text-button"><i class="fa fa-whatsapp"></i><span>WhatsApp</span></div></div></a>

CSS код:

.whatsapp-button {
       background: #25D366;
       border: 3px solid #1cc15a;
       border-radius: 50%;
       box-shadow: 0 8px 10px rgba(7, 206, 112, 0.6);
       cursor: pointer;
       height: 68px;
       text-align: center;
       width: 68px;
       position: fixed;
       right: 5%;
       bottom: 8%;
       padding: 0px !important;
       z-index: 9999;
       transition: .3s;
       -webkit-animation: hoverWave linear 1s infinite;
       animation: hoverWave linear 1s infinite;
}
  
.whatsapp-button .text-button {
        height:68px;
        width:68px;        
        border-radius:50%;
        position:relative;
        overflow:hidden;
}
.whatsapp-button .text-button span {
    text-align: center;
    color:#23a455;
    opacity: 0;
    font-size: 0;
        position:absolute;
        right: 8px;
        top: 27px;
    line-height: 14px;
        font-weight: 600;
    transition: opacity .3s linear;
    font-family: 'montserrat', Arial, Helvetica, sans-serif;
}
.whatsapp-button .text-button:hover span {
        opacity: 1;
        font-size: 11px;
}
.whatsapp-button:hover i {
        display:none;
        color:#25D366;
        font-size:44px;
        transition:.3s;
}
.whatsapp-button:hover {
        z-index:1;
        background:#fff;
        color:transparent;
        transition:.3s;
}
}
.whatsapp-button i {
        color:#fff;
        font-size:44px;
        transition:.3s;
        line-height: 66px;transition: .5s ease-in-out;
        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(7,206,112,0.3),0 0 0 0 rgba(7,206,112,0.2),0 0 0 0 rgba(7,206,112,0.2)
}
40% {
        box-shadow:0 8px 10px rgba(7,206,112,0.3),0 0 0 15px rgba(7,206,112,0.2),0 0 0 0 rgba(7,206,112,0.2)
}
80% {
        box-shadow:0 8px 10px rgba(7,206,112,0.3),0 0 0 30px rgba(7,206,112,0),0 0 0 26.7px rgba(7,206,112,0.067)
}
100% {
        box-shadow:0 8px 10px rgba(7,206,112,0.3),0 0 0 30px rgba(7,206,112,0),0 0 0 40px rgba(7,206,112,0.0)
}
}@keyframes hoverWave {
        0% {
        box-shadow:0 8px 10px rgba(7,206,112,0.3),0 0 0 0 rgba(7,206,112,0.2),0 0 0 0 rgba(7,206,112,0.2)
}
40% {
        box-shadow:0 8px 10px rgba(7,206,112,0.3),0 0 0 15px rgba(7,206,112,0.2),0 0 0 0 rgba(7,206,112,0.2)
}
80% {
        box-shadow:0 8px 10px rgba(7,206,112,0.3),0 0 0 30px rgba(7,206,112,0),0 0 0 26.7px rgba(7,206,112,0.067)
}
100% {
        box-shadow:0 8px 10px rgba(7,206,112,0.3),0 0 0 30px rgba(7,206,112,0),0 0 0 40px rgba(7,206,112,0.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);
}
}
@-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);
}
}

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

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

установка кнопки whatsapp на wordpress

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

Например, для вставки HTML подойдут такие плагины, как "DCO Insert Analytics Code", "Head & Footer Code", "Woody Snippets" и им подобные. А для добавления CSS подойдёт плагин "Custom CSS" или "SiteOrigin CSS".

WordPress плагин WhatsApp кнопки

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

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

Ещё один мой плагин, с помощью которого можно добавить сразу любое количество контактов. При нажатии на кнопку появляются всплывающие кнопки с добавленными контактами.

Ссылка на плагин Multibutton Fixed

33 ответа

  1. Garri:
    17.07.2020 в 00:54

    Все отлично работает, спасибо вам за информацию для виджета, очень помогло!!!

    Ответить
  2. Дмитрий:
    02.09.2020 в 22:44

    Автору спасибо за кнопку! Все отлично работает!

    Ответить
  3. Username:
    15.09.2020 в 00:39

    Привет. Как сделать, что бы при нажатии на эту кнопку в приложении вместе с вопросом присылалась ссылка со станицы, где она была нажата?

    Ответить
  4. Дмитрий:
    01.10.2020 в 20:03

    Приветствую. У меня почему то получается только мерцающий зеленый кружок без логотипа WhatsApp

    Ответить
    1. Администратор:
      02.11.2020 в 13:56

      Значит что-то делаете неправильно, возможно, шрифт не подключили.

      Ответить
  5. Ай:
    02.11.2020 в 13:43

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

    Ответить
    1. Администратор:
      02.11.2020 в 13:53

      Наверно шрифт FontAwesome у вас не подключен.

      Ответить
      1. Ай:
        02.11.2020 в 15:02

        а как его подключить нет инструкции?))

        Ответить
        1. Администратор:
          20.02.2021 в 17:35

          Не внимательно статью прочитали) Короче, если без заморочек, то просто установите плагин Font Awesome (он так и называется).

          Ответить
  6. ппппп:
    10.12.2020 в 21:17

    Автору спасибо за кнопку!

    Ответить
  7. Нео:
    27.09.2021 в 15:53

    Кнопка топ - сделайте плагином на ВП

    Ответить
  8. Алексей Валерьевич:
    16.02.2022 в 17:35

    Спасибо вам огромное! Установил и всё прекрасно работает.

    Ответить
  9. Джулия:
    29.09.2022 в 14:51

    Возможно сделать, чтобы кнопка скрывалась при скроллинге страницы?

    Ответить
    1. Администратор:
      19.10.2022 в 15:33

      Да, конечно. Делается по принципу появления кнопки "вверх".

      Ответить
      1. Павел:
        08.04.2024 в 17:10

        Добрый день, а можно дополнительный кусочек кода, чтоб при скролле скрывалась? А так всё работает прекрасно, спасибо!

        Ответить
        1. Администратор:
          09.04.2024 в 16:34

          Это уже нужно скрипты задействовать - отдельная песня.

          Ответить
  10. София:
    09.10.2022 в 13:40

    Как этот виджет добавить на опенкарт? Пробую, уже добавила код и в шапку и в подвал и в файлы css во все темы - не хочет отображаться...

    Ответить
    1. Администратор:
      19.10.2022 в 15:36

      Надо смотреть, что и куда вы добавляете...

      Ответить
  11. Ербол:
    02.11.2022 в 16:29

    на пк отображается, а вот на сматфоне нет, на сайте

    Ответить
    1. Алексей Сергеевч Харьков:
      22.01.2023 в 19:59

      такая же прблема

      Ответить
  12. Борис:
    04.08.2023 в 02:59

    Друзья, доброго дня!

    Спасибо за отличное решение!
    Использовали первый вариант Вашей кнопки. Немного увеличили размер для лучшей видимости.
    На сайте: igrushkadlyadushi.ru - всё отлично.
    На втором: medic.lightideas.studio - "плющит" шрифтину (белую иконку) вотсап... голову сломали почему это - решения не нашли. (((
    CSS вставлен в head, так как при помещении в файлы CSS кнопка не видна вообще. Почему - тоже не понятно. (((

    Очень надеюсь на Ваш совет и помощь!

    Ответить
    1. Администратор:
      07.08.2023 в 14:16

      Добрый день! У вас для шрифта прописан стиль font-style: italic поэтому значок получается с наклоном. Надо прописать font-style: normal;

      Ответить
      1. Борис:
        07.08.2023 в 19:43

        Спасибо Вам огромное!!!!!
        А почему код работает только при CSS в HEAD?

        Ответить
        1. Администратор:
          07.08.2023 в 20:51

          Надо смотреть последовательность подключения всех элементов.

          Ответить
  13. Сергей:
    21.10.2023 в 13:11

    Добрый день, подскажите как правильно прописать ссылку в WhatsApp, что бы при нажатии на кнопку закидывало в нужный чат? Спасибо.

    Ответить
    1. Администратор:
      21.10.2023 в 13:39

      В статье про это написано, и про ссылку, и про кнопку. Вопрос непонятен)

      Ответить
  14. Александр:
    13.12.2023 в 00:27

    Приветствую.
    После установки кнопки по второму варианту, в левом нижнем углу наблюдается мелкая красная иконка WhatsApp.
    Убрал фрагмент кода - картинка исчезла:

    Полагаю, в CSS за нее отвечает класс:
    .whatsapp-button:hover i {
    display:none;
    И др.
    Пожалуйста, поясните для чего нужен этот фрагмент?

    Пока тесстирую сайт на тестовом домене.

    Ответить
    1. Администратор:
      14.12.2023 в 21:32

      В CSS всё нормально - этот код отвечает за смену иконки на надпись при наведении курсора. Я в HTML коде случайно два раза вставил вывод иконки, поэтому выскакивала вторая. Сейчас код поправил.

      Ответить
  15. Илья:
    26.11.2024 в 10:05

    Здравствуйте, спасибо вам большое за код. Был очень рад когда на странице засияла кнопка!) Единственная проблемка в том, что значок белый вацапа в центре очень маленькая и увеличить его не получается, font-size не меняет размер, только смещает её внутри зелёного кружка. Регулировка размера fa-lg и прочее тоже не принесло результатов.

    Ответить
    1. Администратор:
      26.11.2024 в 18:01

      Попробуйте так .fa.fa-whatsapp {font-size: 30px; line-height: 53px;}

      Ответить
  16. Анна:
    18.12.2024 в 16:45

    Все работает. Подскажите, как добавить текст? Чтобы при переходе у клиента уже был набран текст? Спасибо!

    Ответить
    1. Администратор:
      18.12.2024 в 17:08

      Тогда ссылка должна быть такого вида api.whatsapp.com/send/?phone=79000000000&text=Здравствуйте%2C+я+хочу+задать+вопрос

      Ответить
      1. Анна:
        18.12.2024 в 17:40

        Спасибо. Работает!

        Ответить

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

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

Категории
Сайтостроение
Сайтостроение
WordPress
WordPress
WooCommerce
Elementor
elementor
Дизайн
Монетизация
Монетизация
реклама
BIS Arts

Услуги по созданию и обслуживанию сайтов

  • Услуги
  • Портфолио
  • Отзывы
+7 (900) 247-59-69
пн-пт с 10:00 до 19:00
Whatsapp Telegram Envelope
Copyright © 2013 — 2025 BIS Arts
Политика конфиденциальности
  • Услуги
    • Создание сайта под ключ
    • Одностраничный лендинг-сайт
    • Многостраничный сайт
    • Интернет-магазин
    • Обслуживание и доработки сайта
    • Разработка логотипа
  • Уроки
  • Портфолио
  • Отзывы
  • Контакты
  • +7 (900) 247-59-69
  • Написать в Whatsapp
  • Написать в Telegram
Свяжитесь с нами
  • Позвонить
  • Написать в WhatsApp
  • Написать в Telegram
  • Написать письмо
Позвонить
Написать в WhatsApp
Написать в Telegram
Написать письмо