Mẫu code cho nút Call đẹp này
<div class=”div-nut”>
<a href=”tel:0949100000″ class=”nut-goi nut-action”><div><span class=”tooltext”>Gọi ngay</span></div></a>
<a href=”//zalo.me/0949100000″ target=”_blank” class=”nut-zalo nut-action”><div><span class=”tooltext”>Chat với chúng tôi qua Zalo</span></div></a>
<a href=”//m.me/thegioiso365.vn/” target=”_blank” class=”nut-face nut-action”><div><span class=”tooltext”>Facebook Messenger</span></div></a>
</div>
Mã Css cho các nút bạn có thể thay đổithông số tùy theo ý thích của bạn
<style>.div-nut{display: flex; flex-direction: column; font-size: 14px !important; position: fixed; z-index: 2147483647; bottom: 24px; left: 0; padding-left: 5px;}.div-nut >a{display: inline-block; overflow: visible !important; width: 54px!important; height: 54px!important; margin: 6px!important; background-size: 100%!important; border: 2px solid #fff!important; border-radius: 50%!important; margin: 8px; text-align: center; background-repeat: no-repeat; background-position: center center; background-size: auto; cursor: pointer; position: relative;}.div-nut .nut-action:hover .tooltext {visibility: visible; opacity: 1;}.div-nut:hover .nut-action{text-decoration: none !important; box-shadow: 0 5px 10px rgba(0,0,0,.15), 0 4px 15px rgba(0,0,0,.13);}.div-nut .tooltext{visibility: hidden; font-size: 12px !important; line-height: 16px !important; text-align: center; white-space: nowrap; border-radius: 4px; padding: 8px; position: absolute; top: calc(50% – 16px); z-index: 1; opacity: 0; transition: opacity .5s; left: 120%; background-image: linear-gradient(180deg, #e57373 0%, #c62828 100%); color: #fff;}.div-nut .nut-goi{background-image: url(“//webkhoinghiep.net/wp-content/uploads/2020/10/call.svg”);}.div-nut .nut-zalo{background-image: url(“//webkhoinghiep.net/wp-content/uploads/2020/10/zalo.svg”); }.div-nut .nut-face{background-image: url(“//webkhoinghiep.net/wp-content/uploads/2020/10/messenger.svg”);}</style>
