Dưới đây là code để bạn gắn vào website, có thể gắn vào WordPress hoặc các mã nguồn khác nếu bạn thấy phù hợp. Code Hotline mình đã lấy từ các web khác và đưa lên để làm content cho mọi người dùng hãy chia sẻ nếu thấy hữu ích nhé.
Demo online tại : https://webnganh.vn/
Mọi người dùng nhớ tải các icon và sửa lại hình ảnh và icon nhé.
Dưới đây là code hotline đẹp như hình cho các bạn.
<div id="hotline-btn" class="hotline-fixed" title="Liên hệ ngay"> <span class="title-popover"><div class="arrow"></div>Liên hệ ngay</span> <i class="icon-whatsapp"></i><div class="hotline-fixed--group"> <div class="fixed-btn fixed-btn-sm"> <a target="_blank" href="tel:0965218696"> <div class="support-icon nt-rotate"><i class="icon-whatsapp"></i> </div> <span>0965 21 8696</span></a> </div> <div class="fixed-btn fixed-btn-sm support-btn--zalo"> <a target="_blank" href="//zalo.me/0965218696"><img class="support-icon--img nt-rotate" src="https://webnganh.vn/wp-content/uploads/2020/10/zalo-icon.png" alt=""><span>Chat Zalo</span></a> </div> <div class="fixed-btn fixed-btn-sm support-btn--zalo"> <a target="_blank" href="https://www.messenger.com/t/ifnt.vn"> <img class="support-icon--img nt-rotate" src="https://webnganh.vn/wp-content/uploads/2020/10/facebook-messenger.png" alt=""><span>Facebook</span></a> </div> </div> </div> <style> .hotline-fixed { position: fixed; z-index: 1020; right: 120px; bottom: 90px; background: #d10a00; width: 50px; height: 50px; border-radius: 999px; font-size: 1.7rem; color: #ffffff; padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out; transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out; transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out; transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, -webkit-box-shadow .15s ease-in-out; } .hotline-fixed:after { position: absolute; top: 0; left: -1px; width: 50px; height: 50px; border: 4px solid #cd1818; content: ''; border-radius: 50%; -webkit-transform: scale(0.9); transform: scale(0.9); z-index: -1; -webkit-animation: ripple 2s ease-out infinite; animation: ripple 2s ease-out infinite; } .hotline-fixed--group { position: absolute; bottom: 60px; left: 0px; display: block; z-index: 1020; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; width: 160px; } .hotline-fixed--group .fixed-btn-sm { position: relative; left: auto; bottom: auto; padding: 5px 10px 5px 40px; min-width: auto; margin-top: 10px; } .hotline-fixed--group .fixed-btn-sm .support-icon { position: absolute; border: 1px solid #000; width: 30px; height: 30px; position: absolute; border-radius: 50px; left: 3px; top: 2px; background: #000; color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 14px; } .hotline-fixed--group .fixed-btn-sm.support-btn--zalo a { color: #fff; } .hotline-fixed--group .fixed-btn-sm.support-btn--zalo img { width: 24px; height: 24px; position: absolute; left: 6px; top: 5px; } .hotline-fixed--group.show { opacity: 1; visibility: visible; -webkit-transform: translateY(-10px); transform: translateY(-10px); } .hotline-fixed:hover { cursor: pointer; } @-webkit-keyframes ripple { 0% { -webkit-transform: scale(0.9); transform: scale(0.9); opacity: 1; } 100% { -webkit-transform: scale(2); transform: scale(2); opacity: 0; } } @keyframes ripple { 0% { -webkit-transform: scale(0.9); transform: scale(0.9); opacity: 1; } 100% { -webkit-transform: scale(2); transform: scale(2); opacity: 0; } } .title-popover{ width: 84px; height: 30px; background: #2f2b2b; position: absolute; font-size: 12px; left: 60px; display: flex; align-items: center; justify-content: center; bottom: 8px; border-radius: 5px; top: unset; text-align: center; z-index: -1; } .title-popover .arrow{ position: absolute; display: block; left: calc((6px + -1px) * -1); width: 6px; height: 12px; margin: .3rem 0; top: 4px; } .title-popover .arrow::after, .title-popover .arrow::before{ position: absolute; display: block; content: ""; border-color: transparent; border-right-color: transparent; border-style: solid; } .title-popover .arrow::before { right: 0; border-width: 6px 6px 6px 0; border-right-color: rgba(0,0,0,.25); } .title-popover .arrow::after { right: 1px; border-width: 6px 6px 6px 0; border-right-color: #2f2b2b; } .fixed-btn { min-width: 160px; max-width: 180px; background: #FFC107; position: fixed; left: 10px; bottom: 10px; color: #fff !important; font-size: 16px; font-weight: bold; border-radius: 999px; padding: 8px 8px 8px 44px; display: block; margin: 0 auto; } .fixed-btn a { color: #252525; text-decoration: none; } .fixed-btn--icon { position: absolute; border: 1px solid #252525; width: 30px; height: 30px; position: absolute; border-radius: 50px; left: 7px; top: 5px; color: #252525; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .fixed-btn--img { height: 40px; border-radius: 126px; position: absolute; left: 0px; top: 0; } .fixed-btn--zalo { background: #2196f3; left: 10px; bottom: 60px; color: #fff; } .fixed-btn--zalo a { color: #fff; } .nt-rotate { -webkit-animation: Rotate 1.3s linear 1.3s 5; animation: Rotate 1.3s linear 1.3s 5; -webkit-animation-iteration-count: 5; animation-iteration-count: 5; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; } @-webkit-keyframes Rotate { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 4% { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } 8% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 12% { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } 16% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 20% { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } 24% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes Rotate { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 4% { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } 8% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 12% { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } 16% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 20% { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } 24% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } </style> <script> $("#hotline-btn").click(function(){ $('.hotline-fixed--group').toggleClass('show'); $('.body-overlay').toggleClass('open'); }); </script>
Tagged with: code hotline cho web, code hotline đẹp, code hotline nhấp nháy, share code hotline
Despite recent reports that the standard corporate web risk is normally raising, investigations experience revealed that normally fail to...
A virtual data bedroom is a web-affiliated repository of documents and also other information utilized for business transactions. It is...
Today's board of administrators software applications are designed to make the do the job of the company more efficient. They get rid of the need...
Custom research papers are one of the most cost effective alternatives available in the industry today. The most significant element of the papers is...
Code fake php 100 điểm Google Page Speed Insights cho Nodejs if (req.get('User-Agent').includes('Lighthouse')) { return...
Bình luận bài viết
Đăng nhập để bình luận và xem các bình luận khác.