5 mẫu nút liên lạc website bằng HTML cực đẹp

5 mẫu nút liên lạc website bằng HTML cực đẹp

Nút liên lạc website được nhiều website ứng dụng bởi tính hiệu quả (tăng tương tác khách hàng và tỉ lệ chuyển đổi). Tuy nhiên, nhiều người gặp khó khăn khi tích hợp những nút bấm này vào website, bời đa phần phải biết code (lập trình).

Để đơn giản và thuận tiện, bài viết dưới đây chia sẻ 5 loại nút bấm đẹp, bạn chỉ việc chọn mẫu ưu thích và làm theo hướng dẫn để đạt được thành quả!

Tại sao phải gắn nút liên lạc vào website

Nút liên lạc giúp khách hàng dễ dàng liên lạc với tư vấn viên để tìm hiểu kỹ hơn về sản phẩm / dịch vụ bạn đang cung cấp, qua đó tăng tỉ lệ chuyển đổi (chốt đơn) hơn so với những website không có nút liên lạc trực quan (Khách hàng muốn liên lạc phải kéo tận chân trang hoặc truy cập trang liên hệ).

Hơn nữa, khách hàng đa số thường rất ngại việc liên lạc bằng số điện thoại bởi họ sợ bị làm phiền, chính vì thế họ thường ưu tiên những cách thức tư vấn online hơn (Messenger, Zalo, Tawk,…)

tăng tỉ lệ chuyển đổi website
Nút liên lạc website giúp bạn tăng tỉ lệ chuyển đổi

Các nút nhấn đều sử dụng code HTML và CSS đơn giản và được tối ưu nên rất nhẹ, không tốn nhiều dung lượng hay làm website tải chậm đi.

Dưới đây là hướng dẫn chi tiết, bạn chỉ việc chọn 1 trong 5 mẫu mà Hùng cung cấp sau đó làm theo hướng dẫn và tận hưởng thành quả đạt được!

Hướng dẫn cách gắn lên website của bạn

Hướng dẫn này, Hùng sẽ hướng dẫn bạn gắn lên web có sử dụng nền tảng wordpress (nền tảng phổ biến nhất trên thế giới hiện nay). Nếu website của bạn không dùng wordpress, mà dùng một nền tảng khác thì có thể cách gắn khác nhau đôi chút!

Để gắn lên web wordpress có nhiều cách khác nhau, ở đây Hùng chỉ cho các bạn cách mà theo cá nhân thấy đơn giản nhất, có thể áp dụng cho mọi trang web wordpress.

À, web mẫu demo dùng giao diện Tiếng Việt, nếu web của bạn đang ở chế độ ngôn ngữ Tiếng Anh là mặc định thì cũng thao tác tương tự thôi nhé!

Trước khi bắt đầu, nếu theme website của bạn không có tính năng chèn code vào đầu hoặc chân website, thì hãy cài và kích hoạt thêm 1 plugin có tên là Insert Headers and Footers by WpBeginner vào, hình ảnh của plugin như hình bên dưới (thứ 2 từ trái qua nhé).

cài đặt plugin headers and footers by wpbeginner
Plugin Headers and Footers by WpBeginner

Như bạn để ý ở trên, mỗi một mẫu, Hùng cung cấp cho bạn 2 code (HTMLCSS):

Bạn vào Cài đặt -> Insert Header and Footers từ menu admin, phần code HTML bạn copy và paste (dán) chúng vào ô Footer, sau đó bấm lưu lại. Lưu ý là bạn đổi các thông tin (số điện thoại, số zalo, link fanpage,…) bên trong code lại thành thông tin của bạn nhé!

giao diện plugin headers and footers by wpbeginner
Nhớ chèn phần code HTML vào khu vực “Script ở Footer” nhé!

Tiếp theo bạn vào “Giao diện -> Tùy biến“, sau đó để ý và chọn mục dưới cùng là “CSS bổ sung“, rồi dán mớ code CSS này vào sau đó nhấp nút “Đăng” để lưu lại.

css bổ sung wordpress
Bổ sung code CSS vào Website

Xong xuôi, bạn F5 refesh tải lại website và tận hưởng thành quả! Nếu nút hiển thị thì ok, còn nếu không hiển thị hoặc hiển thị lỗi thì bạn phải check xem xét lại mình có làm sai thao tác nào không nhé!

5 mẫu nút liên lạc cực đẹp

Mẫu nút liên lạc số 1

nút liên lạc website wordpress mẫu số 1
Nút bấm liên hệ website wordpress (Mẫu số 1)

Code HTML:

<div class="cta">
    <div class="ctaitem">
        <div class="ctabg" style="background: #dd3333"></div>
        <div class="ctacontent" style="background: #dd3333">Gọi điện</div>
        <div class="ctaimg" style="background: #dd3333"><a href="tel:0387440192"><img src="https://nguyendanghung.com/wp-content/uploads/2021/08/icon-phone-1.png" alt="Gọi điện"></a></div>
    </div>
    <div class="ctaitem">
        <div class="ctabg" style="background: #2196F3"></div>
        <div class="ctacontent" style="background: #2196F3">Messenger</div>
        <div class="ctaimg" style="background: #2196F3"><a href="https://m.me/nguyendanghungcom"><img src="https://nguyendanghung.com/wp-content/uploads/2021/08/icon-mess-1.png" alt="Messenger"></a></div>
    </div>
    <div class="ctaitem">
        <div class="ctabg" style="background: #2196F3"></div>
        <div class="ctacontent" style="background: #2196F3">Chat Zalo</div>
        <div class="ctaimg" style="background: #2196F3"><a href="https://zalo.me/0387440192"><img src="https://nguyendanghung.com/wp-content/uploads/2021/08/icon-zalo-1.png" alt="Chat Zalo"></a></div>
    </div>
    <div class="ctaitem">
        <div class="ctabg" style="background: #2196F3"></div>
        <div class="ctacontent" style="background: #2196F3">Liên hệ</div>
        <div class="ctaimg" style="background: #2196F3"><a href="/contact/"><img src="https://nguyendanghung.com/wp-content/uploads/2021/08/icon-contact-1.png" alt="Liên hệ"></a></div>
        </p>
    </div>
</div>

Code CSS:

.cta {position:fixed;right:0px;bottom:30px;width:90px;z-index:9999;}.ctaitem {position: relative;visibility: visible;background-color: transparent;width: 90px;height: 90px;cursor: pointer;z-index: 9999;-webkit-backface-visibility: hidden;-webkit-transform: translateZ(0);transition: visibility .5s;left: 0;bottom: 0;display: block;}.ctabg {width: 60px;height: 60px;top: 15px;left: 15px;position: absolute;box-shadow: 0 0 0 0 #dd3333;border-radius: 50%;border: 2px solid transparent;-webkit-animation: zigzag 2.3s infinite ease-in-out;animation: zigzag 2.3s infinite ease-in-out;transition: all .5s;-webkit-transform-origin: 50% 50%;-ms-transform-origin: 50% 50%;transform-origin: 50% 50%;-webkit-animuiion: zoom 1.3s infinite;animation: zoom 1.3s infinite;}.ctaimg {width: 40px;height: 40px;line-height: 40px;top: 25px;left: 25px;position: absolute;border-radius: 50%;display: flex;justify-content: center;-webkit-animation: zigzag 2s infinite ease-in-out;animation: zigzag 2s infinite ease-in-out;}.ctaimg a {display:block;}.ctacontent {color: #fff;padding: 10px 15px;border-radius:99px;position:absolute;z-index:0;top:22px;transition-duration:2s;display:none;margin-left:-120px;font-size:100%;width:180px;transition-duration:2s;}.ctaitem:hover .ctacontent {display:block;}.ctamobile {position:fixed!important;right:0px;bottom:0px;width:100%;z-index:99999!important;}.mobileicon {float:left;text-align:center;padding: 5px 0;position:relative;z-index:99999!important;border-right:1px solid #fff;}.mobileicon img {width: 30px;}.mobileicon p {margin-bottom:0;}.mobileicon a {color: #fff;}.mobileicon img {justify-content: center;-webkit-animation: zigzag 2s infinite ease-in-out;animation: zigzag 2s infinite ease-in-out;}@-webkit-keyframes zigzag {0% {-webkit-transform: rotate(0) scale(1) skew(1deg);}10% {-webkit-transform: rotate(-25deg) scale(1) skew(1deg);}20% {-webkit-transform: rotate(25deg) scale(1) skew(1deg);}30% {-webkit-transform: rotate(-25deg) scale(1) skew(1deg);}40% {-webkit-transform: rotate(25deg) scale(1) skew(1deg);}50% {-webkit-transform: rotate(0) scale(1) skew(1deg);}100% {-webkit-transform: rotate(0) scale(1) skew(1deg);}}@keyframes zigzag {0% {-webkit-transform: rotate(0) scale(1) skew(1deg);}10% {-webkit-transform: rotate(-25deg) scale(1) skew(1deg);}20% {-webkit-transform: rotate(25deg) scale(1) skew(1deg);}30% {-webkit-transform: rotate(-25deg) scale(1) skew(1deg);}40% {-webkit-transform: rotate(25deg) scale(1) skew(1deg);}50% {-webkit-transform: rotate(0) scale(1) skew(1deg);}100% {-webkit-transform: rotate(0) scale(1) skew(1deg);}}@-webkit-keyframes zoom{0%{transform:scale(.9)}70%{transform:scale(1);box-shadow:0 0 0 15px transparent}100%{transform:scale(.9);box-shadow:0 0 0 0 transparent}}@keyframes zoom{0%{transform:scale(.9)}70%{transform:scale(1);box-shadow:0 0 0 15px transparent}100%{transform:scale(.9);box-shadow:0 0 0 0 transparent}}

Mẫu nút liên lạc số 2

nút bấm website wordpress mẫu số 2
Nút bấm liên hệ website wordpress (Mẫu số 2)

Code HTML:

<div class="widget-btn-list">
    <a onclick="return gtag_report_conversion('https://m.me/nguyendanghungcom');" href="https://m.me/nguyendanghungcom" rel="nofollow" class="facebook" target="_blank"></a>
    <a onclick="return gtag_report_conversion('https://zalo.me/0387440192');" href="https://zalo.me/0387440192" class="zalo" rel="nofollow" target="_blank"></a>
    <a href="javascript:void(0);" onclick="$('#panel').fadeIn();" class="contact" rel="nofollow"></a>
</div>


<div class="echbay-alo-phone phonering-alo-phone phonering-alo-green style-for-position-bl">
    <a onclick="return gtag_report_conversion('tel:0387440192');" rel="nofollow" href="tel:0387440192" class="">
    <label style=" width: max-content; left: 60px; padding: 0 10px 0 20px; ">0387 440 192</label></a>
    <div class="phonering-alo-ph-circle"></div> 
    <div class="phonering-alo-ph-circle-fill"></div> 
    <div class="phonering-alo-ph-img-circle" style=" height: 35px; width: 35px; top: 50px; ">
    <a onclick="return gtag_report_conversion('tel:0387440192');" rel="nofollow" href="tel:0387440192" class="">.</a></div>
</div>

Code CSS:

.widget-btn-list {position: fixed;right: 10px;bottom: 10px;width: 45px;z-index: 99999;}.widget-btn-list.left{right: auto; left: 15px; bottom: 60px;}.widget-btn-list a {width: 44px;height: 44px;line-height: 44px;display: inline-block!important;border: none!important;font-size: 18px!important;color: #fff!important;text-align: center!important;position: relative;border-radius: 50%!important;cursor: pointer!important;box-shadow: 0 2px 5px 0 rgba(0,0,0,.11);background-size: auto;background-repeat: no-repeat;background-position: center;}.widget-btn-list .google {background-image: url(https://nguyendanghung.com/wp-content/uploads/2021/08/widget_icon_map.svg)!important;background-color: #00b8d4!important;}.widget-btn-list .contact {background-image: url(https://nguyendanghung.com/wp-content/uploads/2021/08/widget_icon_contact_form.svg)!important;background-color: #f7a400!important;}.widget-btn-list .call {background-image: url(https://nguyendanghung.com/wp-content/uploads/2021/08/widget_icon_click_to_call.svg)!important;background-color: #7d51a0!important;}.widget-btn-list .facebook {background-image: url(https://nguyendanghung.com/wp-content/uploads/2021/08/widget_icon_messenger.svg)!important;background-color: #0084ff!important;}.widget-btn-list .zalo {background-image: url(https://nguyendanghung.com/wp-content/uploads/2021/08/widget_icon_zalo.svg)!important;background-color: #0068ff!important;}
    .echbay-alo-phone {display: none;position: fixed;left: -30px;bottom: -30px;width: 145px;height: 145px;z-index: 999}.phonering-alo-ph-circle,.phonering-alo-ph-circle-fill,.phonering-alo-ph-img-circle {position: absolute;border-radius: 50% !important;-webkit-transform-origin: 50% 50%;-ms-transform-origin: 50% 50%;transform-origin: 50% 50%}.phonering-alo-ph-circle {width: 145px;height: 145px;background-color: transparent;border: 2px solid rgba(30, 30, 30, 0.4);top: -2px;left: -2px;-webkit-animation: phonering-alo-circle-anim 1.2s infinite ease-in-out;animation: phonering-alo-circle-anim 1.2s infinite ease-in-out;transition: all .5s}.phonering-alo-phone.phonering-alo-green .phonering-alo-ph-circle {border-color: #bfebfc;opacity: .5}.phonering-alo-ph-circle-fill {width: 85px;height: 85px;-webkit-animation: phonering-alo-circle-fill-anim 2.3s infinite ease-in-out;animation: phonering-alo-circle-fill-anim 2.3s infinite ease-in-out;transition: all .5s}.phonering-alo-phone.phonering-alo-green .phonering-alo-ph-circle-fill {background-color: rgba(0, 175, 242, 0.5)}.phonering-alo-ph-img-circle {width: 45px;height: 45px;background: rgba(30, 30, 30, 0.1) url(https://nguyendanghung.com/wp-content/uploads/2021/08/icon-phone-1.png) no-repeat center center;background-size: auto 80%;-webkit-animation: phonering-alo-circle-img-anim 1s infinite ease-in-out;animation: phonering-alo-circle-img-anim 1s infinite ease-in-out;z-index: 999}.phonering-alo-ph-img-circle a {display: block;width: 45px;line-height: 45px;text-indent: -9999px}.phonering-alo-ph-img-circle a:hover {background: rgba( 255, 255, 255, .2)}.phonering-alo-ph-img-circle a:before {color: #fff;font-size: 30px;display: inline-block}.phonering-alo-phone:hover .phonering-alo-ph-img-circle {background-color: #00aff2}.phonering-alo-phone.phonering-alo-green .phonering-alo-ph-img-circle {background-color: #00aff2}@-webkit-keyframes phonering-alo-circle-anim {0% {-webkit-transform: rotate(0) scale(.5) skew(1deg);-webkit-opacity: .1}30% {-webkit-transform: rotate(0) scale(.7) skew(1deg);-webkit-opacity: .5}100% {-webkit-transform: rotate(0) scale(1) skew(1deg);-webkit-opacity: .1}}@-webkit-keyframes phonering-alo-circle-fill-anim {0% {-webkit-transform: rotate(0) scale(.7) skew(1deg);opacity: .2}50% {-webkit-transform: rotate(0) scale(1) skew(1deg);opacity: .2}100% {-webkit-transform: rotate(0) scale(.7) skew(1deg);opacity: .2}}@-webkit-keyframes phonering-alo-circle-img-anim {0% {-webkit-transform: rotate(0) scale(1) skew(1deg)}10% {-webkit-transform: rotate(-25deg) scale(1) skew(1deg)}20% {-webkit-transform: rotate(25deg) scale(1) skew(1deg)}30% {-webkit-transform: rotate(-25deg) scale(1) skew(1deg)}40% {-webkit-transform: rotate(25deg) scale(1) skew(1deg)}50% {-webkit-transform: rotate(0) scale(1) skew(1deg)}100% {-webkit-transform: rotate(0) scale(1) skew(1deg)}}@-webkit-keyframes fadeInRight {0% {opacity: 0;-webkit-transform: translate3d(100%, 0, 0);-ms-transform: translate3d(100%, 0, 0);transform: translate3d(100%, 0, 0)}100% {opacity: 1;-webkit-transform: none;-ms-transform: none;transform: none}}@keyframes fadeInRight {0% {opacity: 0;-webkit-transform: translate3d(100%, 0, 0);-ms-transform: translate3d(100%, 0, 0);transform: translate3d(100%, 0, 0)}100% {opacity: 1;-webkit-transform: none;-ms-transform: none;transform: none}}@-webkit-keyframes fadeOutRight {0% {opacity: 1}100% {opacity: 0;-webkit-transform: translate3d(100%, 0, 0);-ms-transform: translate3d(100%, 0, 0);transform: translate3d(100%, 0, 0)}}@keyframes fadeOutRight {0% {opacity: 1}100% {opacity: 0;-webkit-transform: translate3d(100%, 0, 0);-ms-transform: translate3d(100%, 0, 0);transform: translate3d(100%, 0, 0)}}@-webkit-keyframes phonering-alo-circle-anim {0% {-webkit-transform: rotate(0) scale(.5) skew(1deg);transform: rotate(0) scale(.5) skew(1deg);opacity: .1}30% {-webkit-transform: rotate(0) scale(.7) skew(1deg);transform: rotate(0) scale(.7) skew(1deg);opacity: .5}100% {-webkit-transform: rotate(0) scale(1) skew(1deg);transform: rotate(0) scale(1) skew(1deg);opacity: .1}}@keyframes phonering-alo-circle-anim {0% {-webkit-transform: rotate(0) scale(.5) skew(1deg);transform: rotate(0) scale(.5) skew(1deg);opacity: .1}30% {-webkit-transform: rotate(0) scale(.7) skew(1deg);transform: rotate(0) scale(.7) skew(1deg);opacity: .5}100% {-webkit-transform: rotate(0) scale(1) skew(1deg);transform: rotate(0) scale(1) skew(1deg);opacity: .1}}@-webkit-keyframes phonering-alo-circle-fill-anim {0% {-webkit-transform: rotate(0) scale(.7) skew(1deg);transform: rotate(0) scale(.7) skew(1deg);opacity: .2}50% {-webkit-transform: rotate(0) scale(1) skew(1deg);transform: rotate(0) scale(1) skew(1deg);opacity: .2}100% {-webkit-transform: rotate(0) scale(.7) skew(1deg);transform: rotate(0) scale(.7) skew(1deg);opacity: .2}}@keyframes phonering-alo-circle-fill-anim {0% {-webkit-transform: rotate(0) scale(.7) skew(1deg);transform: rotate(0) scale(.7) skew(1deg);opacity: .2}50% {-webkit-transform: rotate(0) scale(1) skew(1deg);transform: rotate(0) scale(1) skew(1deg);opacity: .2}100% {-webkit-transform: rotate(0) scale(.7) skew(1deg);transform: rotate(0) scale(.7) skew(1deg);opacity: .2}}@-webkit-keyframes phonering-alo-circle-img-anim {0% {-webkit-transform: rotate(0) scale(1) skew(1deg);transform: rotate(0) scale(1) skew(1deg)}10% {-webkit-transform: rotate(-25deg) scale(1) skew(1deg);transform: rotate(-25deg) scale(1) skew(1deg)}20% {-webkit-transform: rotate(25deg) scale(1) skew(1deg);transform: rotate(25deg) scale(1) skew(1deg)}30% {-webkit-transform: rotate(-25deg) scale(1) skew(1deg);transform: rotate(-25deg) scale(1) skew(1deg)}40% {-webkit-transform: rotate(25deg) scale(1) skew(1deg);transform: rotate(25deg) scale(1) skew(1deg)}50% {-webkit-transform: rotate(0) scale(1) skew(1deg);transform: rotate(0) scale(1) skew(1deg)}100% {-webkit-transform: rotate(0) scale(1) skew(1deg);transform: rotate(0) scale(1) skew(1deg)}}@keyframes phonering-alo-circle-img-anim {0% {-webkit-transform: rotate(0) scale(1) skew(1deg);transform: rotate(0) scale(1) skew(1deg)}10% {-webkit-transform: rotate(-25deg) scale(1) skew(1deg);transform: rotate(-25deg) scale(1) skew(1deg)}20% {-webkit-transform: rotate(25deg) scale(1) skew(1deg);transform: rotate(25deg) scale(1) skew(1deg)}30% {-webkit-transform: rotate(-25deg) scale(1) skew(1deg);transform: rotate(-25deg) scale(1) skew(1deg)}40% {-webkit-transform: rotate(25deg) scale(1) skew(1deg);transform: rotate(25deg) scale(1) skew(1deg)}50% {-webkit-transform: rotate(0) scale(1) skew(1deg);transform: rotate(0) scale(1) skew(1deg)}100% {-webkit-transform: rotate(0) scale(1) skew(1deg);transform: rotate(0) scale(1) skew(1deg)}}.style-for-position-br {left: auto;right: 0}.style-for-position-cl {bottom: auto;top: 50%}.style-for-position-cr {left: auto;bottom: auto;top: 50%;right: 0}.style-for-position-tl {bottom: auto;top: 0}.style-for-position-tr {left: auto;bottom: auto;top: 0;right: 0} .phonering-alo-phone.phonering-alo-green .phonering-alo-ph-circle {border-color: #e11428}.phonering-alo-phone.phonering-alo-green .phonering-alo-ph-circle-fill,.phonering-alo-phone.phonering-alo-green .phonering-alo-ph-img-circle {background-color: #e11428}.phonering-alo-ph-img-circle {width: 45px;height: 45px;top: 45px;left: 45px}.phonering-alo-ph-img-circle a {width: 45px;line-height: 45px}.phonering-alo-ph-circle-fill {width: 90px;height: 90px;top: 22.5px;left: 22.5px}.echbay-alo-phone,.phonering-alo-ph-circle {width: 135px;height: 135px}.style-for-position-cr,.style-for-position-cl {margin-top: -67.5px;}@media screen and (max-width:0px) {.style-for-position-bl {left: -45px;bottom: -45px}.style-for-position-br {right: -45px;bottom: -45px}.style-for-position-cl {left: -45px;}.style-for-position-cr {right: -45px;}.style-for-position-tl {top: -45px;left: -45px}.style-for-position-tr {top: -45px;right: -45px}}.echbay-alo-phone {display: block}.echbay-alo-phone,.phonering-alo-ph-circle {width: auto;}.phone-tel01 {margin-top: 50px;margin-left: 110px;font-size: 20px;color: red;font-weight: 700;}.phone-tel01 a {color: red;}.echbay-alo-phone label{position: absolute;width: 130px;left: 80px;line-height: 35px;text-align: center;font-weight: bold;background: #e11428;color: #fff;border-radius: 0 18px 18px 0;bottom: 40px;}

Mẫu nút liên lạc số 3

nút bấm website wordpress mẫu số 3 desktop
Nút bấm liên hệ website wordpress (Mẫu số 3) – Giao diện Desktop
nút bấm website wordpress mẫu số 3 mobile
Nút bấm liên hệ website wordpress (Mẫu số 3) – Giao diện mobile

Code HTML:

<div class="ndh-nav">
    <ul>
        <li><a href="https://www.google.com/maps/place/Ch%E1%BA%A3+b%C3%B2+Qu%E1%BA%A3ng+Nam+%C4%90%C3%A0+N%E1%BA%B5ng+qu%E1%BA%ADn+12+tpHCM/@10.8512563,106.6298579,17z/data=!3m1!4b1!4m5!3m4!1s0x317529c2715e9d75:0x2352b2e8f6d0097!8m2!3d10.8512419!4d106.6320448" rel="nofollow" target="_blank"><i class="ticon-heart"></i>Tìm đường</a></li>
        <li><a href="https://zalo.me/0387440192" rel="nofollow" target="_blank"><i class="ticon-zalo-circle2"></i>Chat Zalo</a></li>
                    <li class="phone-mobile">
                        <a href="tel:0387440192" rel="nofollow" class="button">
                            <span class="phone_animation animation-shadow">
                                <i class="icon-phone-w" aria-hidden="true"></i>
                            </span>
                            <span class="btn_phone_txt">Gọi điện</span>
                        </a>
                    </li>
                    <li><a href="https://m.me/nguyendanghungcom" rel="nofollow" target="_blank"><i class="ticon-messenger"></i>Messenger</a></li>
        <li><a href="sms:0387440192" class="chat_animation">
        <i class="ticon-chat-sms" aria-hidden="true" title="Nhắn tin sms"></i>
            Nhắn tin SMS</a>
        </li>
        <li class="to-top-pc">
            <a href="#" rel="nofollow">
                <i class="ticon-angle-up" aria-hidden="true" title="Quay lên trên"></i>
            </a>
        </li>
    </ul>
</div>

Code CSS:

    .phone-mobile {display: none;}
    .ndh-nav {
        position: fixed;
        left: 13px;
        background: #fff;
        border-radius: 5px;
        width: auto;
        z-index: 150;
        bottom: 50px;
        padding: 10px 0;
        border: 1px solid #f2f2f2;
    }
    .ndh-nav ul {list-style: none;padding: 0;margin: 0;}
    .ndh-nav ul li {list-style: none!important;}
    .ndh-nav ul>li a {
        border:none;
        padding: 3px;
        display: block;
        border-radius: 5px;
        text-align: center;
        font-size: 10px;
        line-height: 15px;
        color: #515151;
        font-weight: 700;
        max-width: 72.19px;
        max-height: 54px;
        text-decoration: none;
    }
    .ndh-nav ul>li .chat_animation{display:none}
    .ndh-nav ul>li a i.ticon-heart {
        background: url(https://nguyendanghung.com/wp-content/uploads/2021/08/icon3-map.png) no-repeat;
        background-size: contain;
        width: 36px;
        height: 36px;
        display: block;
    }
    .ndh-nav ul>li a i.ticon-zalo-circle2 {
        background: url(https://nguyendanghung.com/wp-content/uploads/2021/08/icon3-zalo.png) no-repeat;
        background-size: contain;
        width: 36px;
        height: 36px;
        display: block;
    }.ndh-nav li .button {
        background: transparent;
    }.ndh-nav ul>li a i.ticon-angle-up {
        background: url(https://nguyendanghung.com/wp-content/uploads/2021/08/icon3-go-to-top.png) no-repeat;
        background-size: contain;
        width: 36px;
        height: 36px;
        display: block;
    }.ndh-nav ul>li a i {
        width: 33px;
        height: 33px;
        display: block;
        margin: auto;
    }.ndh-nav ul li .button .btn_phone_txt {
        position: relative; top:35px;
        font-size: 10px;
        font-weight: bold;
        text-transform: none;
    }
    .ndh-nav ul li .button .phone_animation i {
        display: inline-block;
        width: 27px;
        font-size: 26px;
        margin-top: 12px;
    }.ndh-nav ul>li a.chat_animation svg {
        margin: -13px 0 -20px;
    }
    .ndh-nav ul>li a i.ticon-messenger {
        background: url(https://nguyendanghung.com/wp-content/uploads/2021/08/icon3-messenger.png) no-repeat;
        background-size: contain;
        width: 36px;
        height: 36px;
        display: block;
    }.ndh-nav ul li .button .phone_animation i {
        display: inline-block;
        width: 27px;
        font-size: 26px;
        margin-top: 12px;
    }
    .ndh-nav ul>li a i.ticon-chat-sms {
        background: url(https://nguyendanghung.com/wp-content/uploads/2021/08/icon3-sms.jpg) no-repeat;
        background-size: contain;
        width: 38px;
        height: 36px;
        display: block;
    }
    .ndh-nav ul>li a i.icon-phone-w {
        background: url(https://nguyendanghung.com/wp-content/uploads/2021/08/icon3-phone.png) no-repeat;
        background-size: contain;}
    .ndh-nav ul li .button .btn_phone_txt {
        position: relative;
    }
    @media only screen and (max-width: 600px){
    .ndh-nav li .chat_animation{display:block !Important}
    
    .ndh-nav li .button .phone_animation {box-shadow: none;
        position: absolute;
        top: -16px;
        left: 50%;
        transform: translate(-50%,0);
        width: 50px;
        height: 50px;
        border-radius: 100%;
        background: #6cb917;
        line-height: 15px;
        border: 2px solid white;
    }
    .ndh-nav ul>li a{padding:0; margin:0 auto}
    .ndh-nav {
        background: white;
        width: 100%; border-radius:0;
        color: #fff;
        height: 60px;
        line-height: 50px;
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 999;
        padding: 5px;
        margin: 0;
        box-shadow: 0 4px 10px 0 #000;
    }
    .ndh-nav li {
        float: left;
        width: 20%;
        list-style: none;
        height: 50px;
    }
    .phone-mobile{display:block !important}}

Mẫu nút liên lạc số 4

nút bấm website wordpress mẫu số 4 desktop
Nút bấm liên hệ website wordpress (Mẫu số 4) – Giao diện desktop
nút bấm website wordpress mẫu số 4 mobile
Nút bấm liên hệ website wordpress (Mẫu số 1) – Giao diện mobile

Code HTML:

<div class="hotline-phone-ring-wrap">
	<div class="hotline-phone-ring">
		<div class="hotline-phone-ring-circle"></div>
		<div class="hotline-phone-ring-circle-fill"></div>
		<div class="hotline-phone-ring-img-circle">
		<a href="tel:0387440192" class="pps-btn-img">
			<img src="https://nguyendanghung.com/wp-content/uploads/2021/08/icon-phone-1.png" alt="Gọi điện thoại" width="50">
		</a>
		</div>
	</div>
	<div class="hotline-bar">
		<a href="tel:0987654321">
			<span class="text-hotline">0387.440.192</span>
		</a>
	</div>
</div>

Code CSS:

.hotline-phone-ring-wrap {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 999999;
  }
  .hotline-phone-ring {
    position: relative;
    visibility: visible;
    background-color: transparent;
    width: 110px;
    height: 110px;
    cursor: pointer;
    z-index: 11;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transition: visibility .5s;
    left: 0;
    bottom: 0;
    display: block;
  }
  .hotline-phone-ring-circle {
      width: 85px;
    height: 85px;
    top: 10px;
    left: 10px;
    position: absolute;
    background-color: transparent;
    border-radius: 100%;
    border: 2px solid #e60808;
    -webkit-animation: phonering-alo-circle-anim 1.2s infinite ease-in-out;
    animation: phonering-alo-circle-anim 1.2s infinite ease-in-out;
    transition: all .5s;
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    opacity: 0.5;
  }
  .hotline-phone-ring-circle-fill {
      width: 55px;
    height: 55px;
    top: 25px;
    left: 25px;
    position: absolute;
    background-color: rgba(230, 8, 8, 0.7);
    border-radius: 100%;
    border: 2px solid transparent;
    -webkit-animation: phonering-alo-circle-fill-anim 2.3s infinite ease-in-out;
    animation: phonering-alo-circle-fill-anim 2.3s infinite ease-in-out;
    transition: all .5s;
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
  }
  .hotline-phone-ring-img-circle {
      background-color: #e60808;
      width: 33px;
    height: 33px;
    top: 37px;
    left: 37px;
    position: absolute;
    background-size: 20px;
    border-radius: 100%;
    border: 2px solid transparent;
    -webkit-animation: phonering-alo-circle-img-anim 1s infinite ease-in-out;
    animation: phonering-alo-circle-img-anim 1s infinite ease-in-out;
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .hotline-phone-ring-img-circle .pps-btn-img {
      display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
  .hotline-phone-ring-img-circle .pps-btn-img img {
      width: 20px;
      height: 20px;
  }
  .hotline-bar {
    position: absolute;
    background: rgba(230, 8, 8, 0.75);
    height: 40px;
    width: 180px;
    line-height: 40px;
    border-radius: 3px;
    padding: 0 10px;
    background-size: 100%;
    cursor: pointer;
    transition: all 0.8s;
    -webkit-transition: all 0.8s;
    z-index: 9;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.1);
    border-radius: 50px !important;
    /* width: 175px !important; */
    left: 33px;
    bottom: 37px;
  }
  .hotline-bar > a {
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    font-weight: bold;
    text-indent: 50px;
    display: block;
    letter-spacing: 1px;
    line-height: 40px;
    font-family: Arial;
  }
  .hotline-bar > a:hover,
  .hotline-bar > a:active {
    color: #fff;
  }
  @-webkit-keyframes phonering-alo-circle-anim {
    0% {
      -webkit-transform: rotate(0) scale(0.5) skew(1deg);
      -webkit-opacity: 0.1;
    }
    30% {
      -webkit-transform: rotate(0) scale(0.7) skew(1deg);
      -webkit-opacity: 0.5;
    }
    100% {
      -webkit-transform: rotate(0) scale(1) skew(1deg);
      -webkit-opacity: 0.1;
    }
  }
  @-webkit-keyframes phonering-alo-circle-fill-anim {
    0% {
      -webkit-transform: rotate(0) scale(0.7) skew(1deg);
      opacity: 0.6;
    }
    50% {
      -webkit-transform: rotate(0) scale(1) skew(1deg);
      opacity: 0.6;
    }
    100% {
      -webkit-transform: rotate(0) scale(0.7) skew(1deg);
      opacity: 0.6;
    }
  }
  @-webkit-keyframes phonering-alo-circle-img-anim {
    0% {
      -webkit-transform: rotate(0) scale(1) skew(1deg);
    }
    10% {
      -webkit-transform: rotate(-25deg) scale(1) skew(1deg);
    }
    20% {
      -webkit-transform: rotate(25deg) scale(1) skew(1deg);
    }
    30% {
      -webkit-transform: rotate(-25deg) scale(1) skew(1deg);
    }
    40% {
      -webkit-transform: rotate(25deg) scale(1) skew(1deg);
    }
    50% {
      -webkit-transform: rotate(0) scale(1) skew(1deg);
    }
    100% {
      -webkit-transform: rotate(0) scale(1) skew(1deg);
    }
  }
  @media (max-width: 768px) {
    .hotline-bar {
      display: none;
    }
  }

Mẫu nút liên lạc số 5

nút bấm website wordpress mẫu số 5
Nút bấm liên hệ website wordpress (Mẫu số 5)

Code HTML:

<ul id="tnContact">
<li>
    <a href="https://messenger.com/t/nguyendanghungcom" class="iconfb" target="_blank">
    <i class="fab fa-facebook-f"></i>
    </a>
    <span class="label fb" >Chat Facebook</span>
</li>
<li>
    <a href="https://zalo.me/0387440192" class="iconzalo" target="_blanl">
    <img src="https://nguyendanghung.com/wp-content/uploads/2021/08/icon3-zalo.png" alt="">
    </a>
    <span class="label zalo">Nhắn tin zalo</span>
</li>
<li>
    <a href="sms:0387440192" class="iconsms">
    <i class="fas fa-sms"></i>
    </a>
    <span class="label sms">Nhắn tin điện thoại</span>
</li>
<li>
    <a href="tel:0387440192" class="iconcall">
    <i class="fas fa-phone"></i>
    </a>
    <span class="label call">Gọi điện thoại</span>
</li>
</ul>

Code CSS:

#tnContact{
  max-width: 230px;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  position: fixed;
  bottom: 3%;
  left: 2%;
  z-index: 9999;
}
#tnContact li{
  list-style-type: none;
  width: 40px;
  height: 40px;
  padding: 0;
  margin-bottom: 10px;
  white-space: nowrap;
}
#tnContact li a{
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  margin-right: 15px;
  text-align: center;
  border-radius: 99px;
}
#tnContact li a i{
  font-size: 18px;
  color: #fff;
}
#tnContact li .iconzalo img{
  width: 24px;
  height: 24px;
  vertical-align: middle;
}
#tnContact li .label{
  position: relative;
  visibility: hidden;
  cursor: pointer;
  color: #fff;
  padding: 6px 10px;
  border-radius: 0 99px 99px 0;
}
#tnContact li .label:before{
  content: "";
  top: 0;
  left: -15px;
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-right: 15px solid #189eff;
  border-bottom: 15px solid transparent;
}
#tnContact li:hover .label{visibility: visible;}

/* Background Icon & Label */
.iconfb , .label.fb{background: #3b5999}
.iconzalo , .label.zalo{background: #008df2}
.iconsms , .label.sms{background: #00c300;}
.iconcall , .label.call{background: #383838}

.fb.label:before{  border-right-color: #3b5999!important}
.zalo.label:before{  border-right-color: #008df2!important}
.sms.label:before{  border-right-color: #00c300!important}
.call.label:before{  border-right-color: #383838!important}

Chú ý: Riêng với mẫu số 5 này, để code hiển thị được các icon, bạn chèn thêm đoạn code font awesome dưới đây vào phần đầu header nữa nhé!

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">

Bảng Tin Hữu Ích

Không bỏ lỡ những những bài chia sẻ hữu ích! Chỉ 2 mail mỗi tuần, cam kết không spam nội dung kém chất lượng. Bạn cũng có thể hủy theo dõi bất kỳ lúc nào mình muốn...

Cảm ơn bạn đã đăng ký!

Có lỗi xảy ra! Vui lòng thử lại...

Đăng ký bản tin chia sẻ
hữu ích

Chỉ 2 tin hữu ích một tuần! Cam kết không spam thư rác. Bạn cũng có thể hủy đăng ký nhận mail mới bất kỳ lúc nào!

Cảm ơn bạn đã đăng ký.

Có lỗi xảy ra, vui lòng thử lại.