Главная / Уроки / Сайтостроение / Кнопка whatsapp для сайта

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

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

28 ответов

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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