Анимированная кнопка Ватсап (Whatsapp) на сайт

Мы уже давно привыкли к различным кнопкам на сайтах в виде телефона, логотипов мессенджеров и так далее. Социальные сети и различные чаты на сегодняшний день — это основная масса потребителей. Наиболее популярным сегодня стал Whatsapp. Поэтому кнопка его чата для связи с владельцами Веб-ресурсов, больше необходимость чем мода.

 Сегодня я приготовил три варианта популярного чата Ватсап. Первый наиболее простой вариант, мы сейчас рассмотрим.

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

Для реализации этой кнопки Whatsapp, сначала необходимо подключить библиотеку «font-awesome.min.css», на главной странице вашего сайта. Для этого между тегами HEAD или перед открывающим тегом BODY, необходимо прописать следующее:

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

Тут же ниже можем прописать стилевые оформления кнопки, или добавить их в стилевой файл вашего сайта:

<style>
		.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;
		}
		}
		@media (max-width : 800px) {  
		.whatsapp-button {   
		bottom: 5px; /*отступ кнопки снизу от экрана*/
		left: 70px; /*отступ кнопки слева от экрана(right - справа)*/
		}
		
		.whatsapp-button {
		width: 100px; /*ширина кнопки*/
		height: 100px; /*высота кнопки*/
		line-height: 97px;
		font-size: 65px;
		
		}
		}
	</style>

А теперь приступим к размещению самой кнопки Ватсап. Её мы расположим в самом низу страницы перед закрывающим тегом BODY. При этом не забываем записать свой телефон, как на примере кода ниже. Телефон обязательно должен быть привязан к мессенджеру Ватсапа:

<!-- 79269262626 - ваш номер к которому привязан whatsapp -->
		<a href="https://api.whatsapp.com/send?phone=79269262626" target="_blank" title="Написать в Whatsapp" rel="noopener noreferrer">
			<div class="whatsapp-button">
				<i class="fa fa-whatsapp"></i>
			</div>
		</a>

Сохраняем файл. Проверяем. Все работает, значит молодцы! Нет ищем ошибку в действиях.

Друзья в данном примере. Я подготовил три вида кнопок. Исходники, которых вы сможете скачать по ссылке ниже. Также посмотрите видео, где подробно рассказывается о каждом из вариантов, установки кнопки Ватсап на сайт.

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

Скачать файл: button-whatsapp.rar [41.94 Kb] (cкачиваний: 123)