...
Skip links

Плавающая телефонная трубка на сайте CSS

В одном из видео я показал как добавляю на сайт мигающую, фиксированную иконку телефона на сайт. Вот её код, если вам нужно. 

Обратите внимание на 2 строку, там нужно указать ссылку для звонка tel:номер_телефона.

  <div class="wa-btn">
		<a class="wa-btn__link" href="ЗДЕСЬ УКАЗЫВАЕМ ССЫЛКУ ДЛЯ ЗВОНКА"></a>
		<div class="wa-btn__ring"></div>

	</div>

<style>

.fixed-header-placeholder{
  height: 0 !important;
 }

.wa-btn {
	outline: none;
	width: 80px;
	height: 80px;
	position: fixed;
	bottom: 15%;
	right: 10%;
	z-index: 1000;
	border-radius: 70px;
  }
.wa-btn__link {
	outline: none;
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
	background: #2CB742 url("https://evangretz.com/wp-content/uploads/2023/03/wa-optimized.png") no-repeat;
	background-size: 60% 60%;
	background-position: 50% 50%;
	transition-duration: 0.3s;
	box-shadow: 0 0 20px 3px rgba(0,0,0,0.1);
	border-radius: 70px;
	animation: scale 3s ease-in-out infinite;
}
.wa-btn__link:active, 
.wa-btn__link:focus {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.wa-btn__link:hover {
	background: rgb(33, 141, 49) url("https://evangretz.com/wp-content/uploads/2023/03/wa-optimized.png") no-repeat;
	background-size: 60% 60%;
	background-position: 50% 50%;
}
.wa-btn__ring {
	display: block;
	position: absolute;
	background: #2CB742;
	opacity: 0.5;
	width: 100%;
	height: 100%;
	left: 0%;
	top: 0%;
	z-index: -2;
	border-radius: 150px;
	animation: blink 3s ease-in-out infinite;
}
.wa-btn__note {
	position: absolute;
	background: #fff;
	height: 80px;
	width: 180px;
	line-height: 30px;
	text-align: center;
	border-radius: 15px;
	padding: 10px 10px;
	margin: 0 0 0 -90px;
	font-family: "Lato", sans-serif;
	font-size: 1.2rem;
	font-weight: 600;
	text-shadow: 0 1px 5px rgba(0,0,0,0.1);
	top: 0%;
	left: 50%;
	z-index: -1;
	box-shadow: 0 5px 20px 3px rgba(0,0,0,0.1);
	transform: scale(0);
	transition-duration: 0.5s;
	opacity: 0;
}
.wa-btn__note--animation {
	transform: scale(1);
	top: -170%;
	opacity: 1;
}

@keyframes scale {
	5% {
		transform: scale(0.9);
	}
	15% {
		transform: scale(1.05);
	}
	25% {
		transform: scale(1);
	}
	100% {
		transform: scale(1);
	}
}

@keyframes blink {
	0% { 
		transform: scale(1);
		opacity: 0.5;
	}
	70% {
		transform: scale(2);
		opacity: 0;
	}
	
	100% {
		transform: scale(2);
		opacity: 0;
	}
}

@media (max-width: 900px) {
	.wa-btn__note--animation {
		transform: scale(0);
	}
}
</style>  
Поставьте оценку
Кайф!
Кайф!
3
Огонь!
Огонь!
1
Иди обниму!
Иди обниму!
0
Прикольно!
Прикольно!
0
Надо подумать!
Надо подумать!
0
БЛ***Ь
БЛ***Ь
0

Leave a comment

Оставить заявку

Оставьте заявку и я свяжусь с вами в течении нескольких часов. Так же вы можете связаться со мной на прямую:

Смотреть
Листай