Сегодня разберем, как сделать красивую анимированную кнопку для связи по 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 для сайта делается довольно просто и её легко отредактировать, если вам понадобится поменять цвет или размеры.
Для создания нашей кнопки, мы будем использовать иконку 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
Данная кнопка имеет более сложную анимацию и эффект появления надписи при наведении.
HTML код:
<a href="https://api.whatsapp.com/send?phone=79260000000" target="_blank" rel="noopener noreferrer"><i class="fa fa-whatsapp"></i><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%; 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; } .whatsapp-button:hover { z-index:1; background:#fff; color:transparent; transition:.3s; } .whatsapp-button:hover i { color:#25D366; font-size:44px; 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.
Современные шаблоны могут иметь более сложную структуру, несколько файлов css и прочее, поэтому можно воспользоваться плагинами.
Например, для вставки HTML подойдут такие плагины, как "DCO Insert Analytics Code", "Head & Footer Code", "Woody Snippets" и им подобные. А для добавления CSS подойдёт плагин "Custom CSS" или "SiteOrigin CSS".
24 ответа
Все отлично работает, спасибо вам за информацию для виджета, очень помогло!!!
Автору спасибо за кнопку! Все отлично работает!
Привет. Как сделать, что бы при нажатии на эту кнопку в приложении вместе с вопросом присылалась ссылка со станицы, где она была нажата?
Приветствую. У меня почему то получается только мерцающий зеленый кружок без логотипа WhatsApp
Значит что-то делаете неправильно, возможно, шрифт не подключили.
Здравствуйте, выбрала первый вариант, но почему то вместо кнопки выходит просто круг, без значка белого. Почему так может быть?
Наверно шрифт FontAwesome у вас не подключен.
а как его подключить нет инструкции?))
Не внимательно статью прочитали) Короче, если без заморочек, то просто установите плагин Font Awesome (он так и называется).
Автору спасибо за кнопку!
Кнопка топ - сделайте плагином на ВП
Спасибо вам огромное! Установил и всё прекрасно работает.
Возможно сделать, чтобы кнопка скрывалась при скроллинге страницы?
Да, конечно. Делается по принципу появления кнопки "вверх".
Как этот виджет добавить на опенкарт? Пробую, уже добавила код и в шапку и в подвал и в файлы css во все темы - не хочет отображаться...
Надо смотреть, что и куда вы добавляете...
на пк отображается, а вот на сматфоне нет, на сайте
такая же прблема
Друзья, доброго дня!
Спасибо за отличное решение!
Использовали первый вариант Вашей кнопки. Немного увеличили размер для лучшей видимости.
На сайте: igrushkadlyadushi.ru - всё отлично.
На втором: medic.lightideas.studio - "плющит" шрифтину (белую иконку) вотсап... голову сломали почему это - решения не нашли. (((
CSS вставлен в head, так как при помещении в файлы CSS кнопка не видна вообще. Почему - тоже не понятно. (((
Очень надеюсь на Ваш совет и помощь!
Добрый день! У вас для шрифта прописан стиль font-style: italic поэтому значок получается с наклоном. Надо прописать font-style: normal;
Спасибо Вам огромное!!!!!
А почему код работает только при CSS в HEAD?
Надо смотреть последовательность подключения всех элементов.
Добрый день, подскажите как правильно прописать ссылку в WhatsApp, что бы при нажатии на кнопку закидывало в нужный чат? Спасибо.
В статье про это написано, и про ссылку, и про кнопку. Вопрос непонятен)