Code nút call hotline

Code nút Hotline,  tải icon call tại đây

	<!-- code nút gọi dán vào web. Thường là footer -->
	<div class="fix_tel">
	<div class="ring-alo-phone ring-alo-green ring-alo-show" id="ring-alo-phoneIcon" style="right: 150px; bottom: -12px;">
	<div class="ring-alo-ph-circle"></div>
	<div class="ring-alo-ph-circle-fill"></div>
	<div class="ring-alo-ph-img-circle">

	<a href="tel:0903172969"><img class="lazy" src="https://codfe.com/wp-content/uploads/2020/04/goi.png" alt="G"></a>

	</div>
	</div>
	<div class="tel">
	<a href="tel:0903172969"><p class="fone">0903 172 969</p></a>
	</div>
	</div>

<style type="text/css">
/* write your CSS code here */
		/*them nut call*/
		.fone {
			font-size:19px;
			/* chữ cạnh nút gọi */
			color:#f00;
			line-height:40px;
			font-weight:bold;
			padding-left:48px;
			/* cách bên trái cho chữ */
			margin:0 0;
		}
		.fix_tel {
			position:fixed;
			bottom:15px;
			left:18px;
			z-index: 999;
		}
		/* left 18px là cách bên trái 18px. nếu muốn cho nút gọi sang phải thay là right */
		.fix_tel a {
			text-decoration:none;
			display:block;
		}
		.tel {
			background:#eee;
			width:205px;
			height:40px;
			position:relative;
			overflow:hidden;
			background-size:40px;
			border-radius:28px;
			border:none
		}
		.ring-alo-phone {
			background-color:transparent;
			cursor:pointer;
			height:80px;
			position:absolute;
			transition:visibility 0.5s ease 0s;
			visibility:hidden;
			width:80px;
			z-index:200000 !important;
		}
		.ring-alo-phone.ring-alo-show {
			visibility:visible;
		}
		.ring-alo-phone.ring-alo-hover,.ring-alo-phone:hover {
			opacity:1;
		}
		.ring-alo-ph-circle {
			animation:1.2s ease-in-out 0s normal none infinite running ring-alo-circle-anim;
			background-color:transparent;
			border:2px solid rgba(30,30,30,0.4);
			border-radius:100%;
			height:70px;
			left:10px;
			opacity:0.1;
			position:absolute;
			top:12px;
			transform-origin:50% 50% 0;
			transition:all 0.5s ease 0s;
			width:70px;
		}
		.ring-alo-phone.ring-alo-active .ring-alo-ph-circle {
			animation:1.1s ease-in-out 0s normal none infinite running ring-alo-circle-anim !important;
		}
		.ring-alo-phone.ring-alo-static .ring-alo-ph-circle {
			animation:2.2s ease-in-out 0s normal none infinite running ring-alo-circle-anim !important;
		}
		.ring-alo-phone.ring-alo-hover .ring-alo-ph-circle,.ring-alo-phone:hover .ring-alo-ph-circle {
			border-color:#009900;
			opacity:0.5;
		}
		.ring-alo-phone.ring-alo-green.ring-alo-hover .ring-alo-ph-circle,.ring-alo-phone.ring-alo-green:hover .ring-alo-ph-circle {
			border-color:#baf5a7;
			opacity:0.5;
		}
		.ring-alo-phone.ring-alo-green .ring-alo-ph-circle {
			border-color:#009900;
			opacity:0.5;
		}
		.ring-alo-ph-circle-fill {
			animation:2.3s ease-in-out 0s normal none infinite running ring-alo-circle-fill-anim;
			background-color:#000;
			border:2px solid transparent;
			border-radius:100%;
			height:30px;
			left:30px;
			opacity:0.1;
			position:absolute;
			top:33px;
			transform-origin:50% 50% 0;
			transition:all 0.5s ease 0s;
			width:30px;
		}
		.ring-alo-phone.ring-alo-hover .ring-alo-ph-circle-fill,.ring-alo-phone:hover .ring-alo-ph-circle-fill {
			background-color:rgba(0,175,242,0.5);
			opacity:0.75 !important;
		}
		.ring-alo-phone.ring-alo-green.ring-alo-hover .ring-alo-ph-circle-fill,.ring-alo-phone.ring-alo-green:hover .ring-alo-ph-circle-fill {
			background-color:rgba(117,235,80,0.5);
			opacity:0.75 !important;
		}
		.ring-alo-phone.ring-alo-green .ring-alo-ph-circle-fill {
			background-color:rgba(0,175,242,0.5);
			opacity:0.75 !important;
		}
		.ring-alo-ph-img-circle {
			animation:1s ease-in-out 0s normal none infinite running ring-alo-circle-img-anim;
			border:2px solid transparent;
			border-radius:100%;
			height:30px;
			left:30px;
			opacity:1;
			position:absolute;
			top:33px;
			transform-origin:50% 50% 0;
			width:30px;
		}
		.ring-alo-phone.ring-alo-hover .ring-alo-ph-img-circle,.ring-alo-phone:hover .ring-alo-ph-img-circle {
			background-color:#009900;
		}
		.ring-alo-phone.ring-alo-green.ring-alo-hover .ring-alo-ph-img-circle,.ring-alo-phone.ring-alo-green:hover .ring-alo-ph-img-circle {
			background-color:#75eb50;
		}
		.ring-alo-phone.ring-alo-green .ring-alo-ph-img-circle {
			background-color:#009900;
		}
		@keyframes ring-alo-circle-anim {
			0% {
				opacity:0.1;
				transform:rotate(0deg) scale(0.5) skew(1deg);
			}
			30% {
				opacity:0.5;
				transform:rotate(0deg) scale(0.7) skew(1deg);
			}
			100% {
				opacity:0.6;
				transform:rotate(0deg) scale(1) skew(1deg);
			}
		}
		@keyframes ring-alo-circle-img-anim {
			0% {
				transform:rotate(0deg) scale(1) skew(1deg);
			}
			10% {
				transform:rotate(-25deg) scale(1) skew(1deg);
			}
			20% {
				transform:rotate(25deg) scale(1) skew(1deg);
			}
			30% {
				transform:rotate(-25deg) scale(1) skew(1deg);
			}
			40% {
				transform:rotate(25deg) scale(1) skew(1deg);
			}
			50% {
				transform:rotate(0deg) scale(1) skew(1deg);
			}
			100% {
				transform:rotate(0deg) scale(1) skew(1deg);
			}
		}
		@keyframes ring-alo-circle-fill-anim {
			0% {
				opacity:0.2;
				transform:rotate(0deg) scale(0.7) skew(1deg);
			}
			50% {
				opacity:0.2;
				transform:rotate(0deg) scale(1) skew(1deg);
			}
			100% {
				opacity:0.2;
				transform:rotate(0deg) scale(0.7) skew(1deg);
			}
		}
		.ring-alo-ph-img-circle a img {
			padding:1px 0 12px 1px;
			width:30px;
			position:relative;
			top: -1px;
		}
		}
</style>