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>