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=”http://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=”https://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(“https://webkhoinghiep.net/wp-content/uploads/2020/10/call.svg”);}.div-nut .nut-zalo{background-image: url(“https://webkhoinghiep.net/wp-content/uploads/2020/10/zalo.svg”); }.div-nut .nut-face{background-image: url(“https://webkhoinghiep.net/wp-content/uploads/2020/10/messenger.svg”);}</style>

Sẵn sàng để phát triển doanh nghiệp của bạn?

Để được tư vấn chi tiết hơn về dịch vụ, quý khách vui lòng cung cấp thông tin cho chúng tôi theo mẫu sau.

Bài viết liên quan

8 chiến lược tiếp thị giữ chân khách hàng được nhiều doanh nghiệp áp dụng 2024

I. Chiến lược giữ chân khách hàng (retention marketing) là gì? Retention marketing là chiến...

Từ vụ việc drama Sầu Riêng: Thương hiệu lao đao vì người đại diện “vạ miệng”, cần quản lý như thế nào?

Nằm không cũng dính đạn, thương hiệu Foodmap mới đây đã bất ngờ hứng chịu...

19 kịch bản chatbot mẫu chuyên nghiệp nhất hiện nay

Trong thời đại công nghệ số, chatbot trở thành công cụ hữu ích giúp người...

SƯ MINH TUỆ – KHEN CŨNG THẾ MÀ KHÔNG KHEN CŨNG NHƯ THẾ

Cảnh mở đầu, quay con đường mòn trong đêm, cỏ mọc um tùm, chứng tỏ...

Bản phát hành bảo mật WordPress 6.5.5 – Những điều bạn cần biết

WordPress Core 6.5.5 đã được phát hành ngày hôm qua , ngày 24 tháng 6 năm 2023....