Статьи о продвижении и создании сайтов

Как добавить кнопку Ватсап на сайт

Posted on by admin
23
Ноя

Первая кнопка 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 - справа)*/
}
}

 

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

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%;
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);
}
}