Фиксированная кнопка мессенджера

Выберите нужный мессенджер для просмотра примера (в правом нижнем углу экрана) и кодов его реализации.

HTML:

<a href="https://api.whatsapp.com/send?phone=70000000000" target="_blank" rel="nofollow">
	<span class="whatsapp-button"></span>
</a>

</a>

CSS:

.whatsapp-button {
    position: fixed;
    right: 20px;
    bottom: 20px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    z-index: 9999;
	background-color: #25D366;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg role='img' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='%23FFF' d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z'/%3e%3c/svg%3e");	
	background-size: 50%; 
	background-repeat: no-repeat;
	background-position: 50% 50%;
}
.whatsapp-button:before,
.whatsapp-button:after {
    content: " ";
    display: block;
    position: absolute;
    border: 1px solid #25D366;
    left: -20px;
    right: -20px;
    top: -20px;
    bottom: -20px;
    border-radius: 50%;
    animation: border-animate 1.5s linear infinite;
    opacity: 0;
}
.whatsapp-button:after{
    animation-delay: .5s;
}
@keyframes border-animate
{
    0% {
        transform: scale(0.5);
        opacity: 0;
	}
    50% {
        opacity: 1;
	}
    100% {
        transform: scale(1.2);
        opacity: 0;
	}
}

.whatsapp-button {

position: fixed;

right: 20px;

bottom: 20px;

transform: translate(-50%, -50%);

border-radius: 50%;

width: 60px;

height: 60px;

z-index: 9999;

background-color: #25D366;

background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg role='img' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='%23FFF' d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z'/%3e%3c/svg%3e");

background-size: 50%;

background-repeat: no-repeat;

background-position: 50% 50%;

}

.whatsapp-button:before,

.whatsapp-button:after {

content: " ";

display: block;

position: absolute;

border: 1px solid #25D366;

left: -20px;

right: -20px;

top: -20px;

bottom: -20px;

border-radius: 50%;

animation: border-animate 1.5s linear infinite;

opacity: 0;

}

.whatsapp-button:after{

animation-delay: .5s;

}

@keyframes border-animate

{

0% {

transform: scale(0.5);

opacity: 0;

}

50% {

opacity: 1;

}

100% {

transform: scale(1.2);

opacity: 0;

}

HTML:

<a href="https://t.me/xazbix" target="_blank" rel="nofollow">
	<span class="telegram-button"></span>
</a>

</a>

CSS:

.telegram-button {
    position: fixed;
    right: 20px;
    bottom: 20px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    z-index: 9999;
	background-color: #2CA5E0;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath fill='%23FFF' d='M23.91 3.79L20.3 20.84c-.25 1.21-.98 1.5-2 .94l-5.5-4.07-2.66 2.57c-.3.3-.55.56-1.1.56-.72 0-.6-.27-.84-.95L6.3 13.7l-5.45-1.7c-1.18-.35-1.19-1.16.26-1.75l21.26-8.2c.97-.43 1.9.24 1.53 1.73z'/%3e%3c/svg%3e");
	background-size: 50%; 
	background-repeat: no-repeat;
	background-position: 50% 50%;
}
.telegram-button:before,
.telegram-button:after {
    content: " ";
    display: block;
    position: absolute;
    border: 1px solid #2CA5E0;
    left: -20px;
    right: -20px;
    top: -20px;
    bottom: -20px;
    border-radius: 50%;
    animation: border-animate 1.5s linear infinite;
    opacity: 0;
}
.telegram-button:after{
    animation-delay: .5s;
}
@keyframes border-animate
{
    0% {
        transform: scale(0.5);
        opacity: 0;
	}
    50% {
        opacity: 1;
	}
    100% {
        transform: scale(1.2);
        opacity: 0;
	}
}

.telegram-button {

position: fixed;

right: 20px;

bottom: 20px;

transform: translate(-50%, -50%);

border-radius: 50%;

width: 60px;

height: 60px;

z-index: 9999;

background-color: #2CA5E0;

background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath fill='%23FFF' d='M23.91 3.79L20.3 20.84c-.25 1.21-.98 1.5-2 .94l-5.5-4.07-2.66 2.57c-.3.3-.55.56-1.1.56-.72 0-.6-.27-.84-.95L6.3 13.7l-5.45-1.7c-1.18-.35-1.19-1.16.26-1.75l21.26-8.2c.97-.43 1.9.24 1.53 1.73z'/%3e%3c/svg%3e");

background-size: 50%;

background-repeat: no-repeat;

background-position: 50% 50%;

}

.telegram-button:before,

.telegram-button:after {

content: " ";

display: block;

position: absolute;

border: 1px solid #2CA5E0;

left: -20px;

right: -20px;

top: -20px;

bottom: -20px;

border-radius: 50%;

animation: border-animate 1.5s linear infinite;

opacity: 0;

}

.telegram-button:after{

animation-delay: .5s;

}

@keyframes border-animate

{

0% {

transform: scale(0.5);

opacity: 0;

}

50% {

opacity: 1;

}

100% {

transform: scale(1.2);

opacity: 0;

}

HTML:

<a href="viber://chat?number=%2B70000000000" target="_blank" rel="nofollow">
	<span class="viber-button"></span>
</a>

</a>

CSS:

.viber-button {
    position: fixed;
    right: 20px;
    bottom: 20px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    z-index: 9999;
	background-color: #665CAC;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg role='img' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='%23FFF' d='M11.398.002C9.473.028 5.331.344 3.014 2.467 1.294 4.177.693 6.698.623 9.82c-.06 3.11-.13 8.95 5.5 10.541v2.42s-.038.97.602 1.17c.79.25 1.24-.499 1.99-1.299l1.4-1.58c3.85.32 6.8-.419 7.14-.529.78-.25 5.181-.811 5.901-6.652.74-6.031-.36-9.831-2.34-11.551l-.01-.002c-.6-.55-3-2.3-8.37-2.32 0 0-.396-.025-1.038-.016zm.067 1.697c.545-.003.88.02.88.02 4.54.01 6.711 1.38 7.221 1.84 1.67 1.429 2.528 4.856 1.9 9.892-.6 4.88-4.17 5.19-4.83 5.4-.28.09-2.88.73-6.152.52 0 0-2.439 2.941-3.199 3.701-.12.13-.26.17-.35.15-.13-.03-.17-.19-.16-.41l.02-4.019c-4.771-1.32-4.491-6.302-4.441-8.902.06-2.6.55-4.732 2-6.172 1.957-1.77 5.475-2.01 7.11-2.02zm.36 2.6a.299.299 0 0 0-.3.299.3.3 0 0 0 .3.3 5.631 5.631 0 0 1 4.03 1.59c1.09 1.06 1.621 2.48 1.641 4.34a.3.3 0 0 0 .3.3v-.009a.3.3 0 0 0 .3-.3 6.451 6.451 0 0 0-1.81-4.76c-1.19-1.16-2.692-1.76-4.462-1.76zm-3.954.69a.955.955 0 0 0-.615.12h-.012c-.41.24-.788.54-1.148.94-.27.32-.421.639-.461.949a1.24 1.24 0 0 0 .05.541l.02.01a13.722 13.722 0 0 0 1.2 2.6 15.383 15.383 0 0 0 2.32 3.171l.03.04.04.03.03.03.03.03a15.603 15.603 0 0 0 3.18 2.33c1.32.72 2.122 1.06 2.602 1.2v.01c.14.04.268.06.398.06a1.84 1.84 0 0 0 1.102-.472c.39-.35.7-.738.93-1.148v-.01c.23-.43.15-.841-.18-1.121a13.632 13.632 0 0 0-2.15-1.54c-.51-.28-1.03-.11-1.24.17l-.45.569c-.23.28-.65.24-.65.24l-.012.01c-3.12-.8-3.95-3.959-3.95-3.959s-.04-.43.25-.65l.56-.45c.27-.22.46-.74.17-1.25a13.522 13.522 0 0 0-1.54-2.15.843.843 0 0 0-.504-.3zm4.473.89a.3.3 0 0 0 .002.6 3.78 3.78 0 0 1 2.65 1.15 3.5 3.5 0 0 1 .9 2.57.3.3 0 0 0 .3.299l.01.012a.3.3 0 0 0 .3-.301c.03-1.19-.34-2.19-1.07-2.99-.73-.8-1.75-1.25-3.05-1.34a.3.3 0 0 0-.042 0zm.49 1.619a.305.305 0 0 0-.018.611c.99.05 1.47.55 1.53 1.58a.3.3 0 0 0 .3.29h.01a.3.3 0 0 0 .29-.32c-.07-1.34-.8-2.091-2.1-2.161a.305.305 0 0 0-.012 0z'/%3e%3c/svg%3e");
	background-size: 50%; 
	background-repeat: no-repeat;
	background-position: 50% 50%;
}
.viber-button:before,
.viber-button:after {
    content: " ";
    display: block;
    position: absolute;
    border: 1px solid #665CAC;
    left: -20px;
    right: -20px;
    top: -20px;
    bottom: -20px;
    border-radius: 50%;
    animation: border-animate 1.5s linear infinite;
    opacity: 0;
}
.viber-button:after{
    animation-delay: .5s;
}
@keyframes border-animate
{
    0% {
        transform: scale(0.5);
        opacity: 0;
	}
    50% {
        opacity: 1;
	}
    100% {
        transform: scale(1.2);
        opacity: 0;
	}
}

.viber-button {

position: fixed;

right: 20px;

bottom: 20px;

transform: translate(-50%, -50%);

border-radius: 50%;

width: 60px;

height: 60px;

z-index: 9999;

background-color: #665CAC;

background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg role='img' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='%23FFF' d='M11.398.002C9.473.028 5.331.344 3.014 2.467 1.294 4.177.693 6.698.623 9.82c-.06 3.11-.13 8.95 5.5 10.541v2.42s-.038.97.602 1.17c.79.25 1.24-.499 1.99-1.299l1.4-1.58c3.85.32 6.8-.419 7.14-.529.78-.25 5.181-.811 5.901-6.652.74-6.031-.36-9.831-2.34-11.551l-.01-.002c-.6-.55-3-2.3-8.37-2.32 0 0-.396-.025-1.038-.016zm.067 1.697c.545-.003.88.02.88.02 4.54.01 6.711 1.38 7.221 1.84 1.67 1.429 2.528 4.856 1.9 9.892-.6 4.88-4.17 5.19-4.83 5.4-.28.09-2.88.73-6.152.52 0 0-2.439 2.941-3.199 3.701-.12.13-.26.17-.35.15-.13-.03-.17-.19-.16-.41l.02-4.019c-4.771-1.32-4.491-6.302-4.441-8.902.06-2.6.55-4.732 2-6.172 1.957-1.77 5.475-2.01 7.11-2.02zm.36 2.6a.299.299 0 0 0-.3.299.3.3 0 0 0 .3.3 5.631 5.631 0 0 1 4.03 1.59c1.09 1.06 1.621 2.48 1.641 4.34a.3.3 0 0 0 .3.3v-.009a.3.3 0 0 0 .3-.3 6.451 6.451 0 0 0-1.81-4.76c-1.19-1.16-2.692-1.76-4.462-1.76zm-3.954.69a.955.955 0 0 0-.615.12h-.012c-.41.24-.788.54-1.148.94-.27.32-.421.639-.461.949a1.24 1.24 0 0 0 .05.541l.02.01a13.722 13.722 0 0 0 1.2 2.6 15.383 15.383 0 0 0 2.32 3.171l.03.04.04.03.03.03.03.03a15.603 15.603 0 0 0 3.18 2.33c1.32.72 2.122 1.06 2.602 1.2v.01c.14.04.268.06.398.06a1.84 1.84 0 0 0 1.102-.472c.39-.35.7-.738.93-1.148v-.01c.23-.43.15-.841-.18-1.121a13.632 13.632 0 0 0-2.15-1.54c-.51-.28-1.03-.11-1.24.17l-.45.569c-.23.28-.65.24-.65.24l-.012.01c-3.12-.8-3.95-3.959-3.95-3.959s-.04-.43.25-.65l.56-.45c.27-.22.46-.74.17-1.25a13.522 13.522 0 0 0-1.54-2.15.843.843 0 0 0-.504-.3zm4.473.89a.3.3 0 0 0 .002.6 3.78 3.78 0 0 1 2.65 1.15 3.5 3.5 0 0 1 .9 2.57.3.3 0 0 0 .3.299l.01.012a.3.3 0 0 0 .3-.301c.03-1.19-.34-2.19-1.07-2.99-.73-.8-1.75-1.25-3.05-1.34a.3.3 0 0 0-.042 0zm.49 1.619a.305.305 0 0 0-.018.611c.99.05 1.47.55 1.53 1.58a.3.3 0 0 0 .3.29h.01a.3.3 0 0 0 .29-.32c-.07-1.34-.8-2.091-2.1-2.161a.305.305 0 0 0-.012 0z'/%3e%3c/svg%3e");

background-size: 50%;

background-repeat: no-repeat;

background-position: 50% 50%;

}

.viber-button:before,

.viber-button:after {

content: " ";

display: block;

position: absolute;

border: 1px solid #665CAC;

left: -20px;

right: -20px;

top: -20px;

bottom: -20px;

border-radius: 50%;

animation: border-animate 1.5s linear infinite;

opacity: 0;

}

.viber-button:after{

animation-delay: .5s;

}

@keyframes border-animate

{

0% {

transform: scale(0.5);

opacity: 0;

}

50% {

opacity: 1;

}

100% {

transform: scale(1.2);

opacity: 0;

}

HTML:

<a href="tel:+70000000000" target="_blank" rel="nofollow">
	<span class="phone-button"></span>
</a>

</a>

CSS:

.phone-button {
    position: fixed;
    right: 20px;
    bottom: 20px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    z-index: 9999;
	background-color: #337AB7;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' class='feather feather-phone'%3e%3cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'%3e%3c/path%3e%3c/svg%3e");
	background-size: 50%; 
	background-repeat: no-repeat;
	background-position: 50% 50%;
}
.phone-button:before,
.phone-button:after {
    content: " ";
    display: block;
    position: absolute;
    border: 1px solid #337AB7;
    left: -20px;
    right: -20px;
    top: -20px;
    bottom: -20px;
    border-radius: 50%;
    animation: border-animate 1.5s linear infinite;
    opacity: 0;
}
.phone-button:after{
    animation-delay: .5s;
}
@keyframes border-animate
{
    0% {
        transform: scale(0.5);
        opacity: 0;
	}
    50% {
        opacity: 1;
	}
    100% {
        transform: scale(1.2);
        opacity: 0;
	}
}

.phone-button {

position: fixed;

right: 20px;

bottom: 20px;

transform: translate(-50%, -50%);

border-radius: 50%;

width: 60px;

height: 60px;

z-index: 9999;

background-color: #337AB7;

background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' class='feather feather-phone'%3e%3cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'%3e%3c/path%3e%3c/svg%3e");

background-size: 50%;

background-repeat: no-repeat;

background-position: 50% 50%;

}

.phone-button:before,

.phone-button:after {

content: " ";

display: block;

position: absolute;

border: 1px solid #337AB7;

left: -20px;

right: -20px;

top: -20px;

bottom: -20px;

border-radius: 50%;

animation: border-animate 1.5s linear infinite;

opacity: 0;

}

.phone-button:after{

animation-delay: .5s;

}

@keyframes border-animate

{

0% {

transform: scale(0.5);

opacity: 0;

}

50% {

opacity: 1;

}

100% {

transform: scale(1.2);

opacity: 0;

}

илья: 07.10.2024 в 21:12

Спасибо за кнопку.
Поставил на свой сайт.На компьютере отлично.
На мобильном телефоне кнопка очень маленькая внизу,почему так?
Мой сайт https://artberesta.ru/contacts.html

Ответить
Алексей Валерьевич: 22.02.2024 в 02:45

Спасибо вам огромное за анимированные кнопки с мессенджером для сайта. Всё прекрасно работает и с установкой не было проблем. Удачи!

Ответить
Anton: 06.02.2024 в 20:22

как заменить иконку на иконки инсты я непонял

Ответить
- Alexander: 07.02.2024 в 07:05
  
  Заходим сюда
  Ищем нужную иконку и нажимаем на CSS, получаем код для background-image и заменяем
  Цвет иконки меняем на нужный (по умолчанию там черный fill='%23000000')
  
  Если SVG иконка откуда то еще, можно преобразовать ее тут
  А если она в PNG, то вообще все просто, указывайте путь и все
  
  Ответить
Артем: 28.08.2023 в 11:23

Спасибо, все отлично работает !

Ответить
СЕРГЕЙ: 04.03.2023 в 16:39

Сделайте пожалуйста такие же кнопки вк и инсту

Ответить
- Alexander: 09.03.2023 в 08:56
  
  background-image и цвета замените у любой и все 🙂
  
  Ответить
  - Сергей: 14.03.2023 в 16:54
    
    А путь, иконку. Я делал. Всё равно переход на эти!
    
    Ответить
    - Alexander: 14.03.2023 в 16:56
      
      И ссылку соответственно 🙂
      
      Ответить
Станислав: 22.02.2022 в 17:00

Я имел ввиду, куда установить код, чтобы там кнопка и появлялась.. Чтобы без регулировки в CSS right: 20px; bottom: 20px;

Ответить
- Alexander: 03.03.2022 в 06:32
  
  Убрать фиксированную позицию: position: fixed;
  
  Ответить
  - Станислав: 03.03.2022 в 12:52
    
    Спасибо!
    
    Ответить
Станислав: 22.02.2022 в 16:51

Здравствуйте! К примеру, как в блоки Builder, выставленные в один ряд.. как сделать, чтобы кнопка была в том блоке, в котором находится код? К примеру, вот в трёх блоках Builder находятся иконки https://disk.yandex.ru/i/Hj8h4Ry-xuFNOw
Как сделать так, чтобы там были эти активные кнопки мессенджеров? Чтобы нормально отображалось и на мобильных устройствах..

Ответить

HTML:

CSS:

HTML:

CSS:

HTML:

CSS:

HTML:

CSS:

Смотрите также:

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

Комментарии: