Share code button tạo nút gọi điện rung lắc cho website WordPres

Chào các anh em truy cập vào website của Tòn. Dưới đây là mẫu code button tạo nút gọi điện rung lắc cho website. Mà Tòn vừa hoàn thành cho khách hàng. Anh em thấy thích thì copy về rồi paste vào trước thẻ </body> là xong nhé!

<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>
    <img class="support-icon--img" src="https://swimtobelive.com/wp-content/themes/swimtobelive/app/icon-hotline.png" alt="" style="width: 30px;">
    <div class="hotline-fixed--group">
        <div class="fixed-btn fixed-btn-sm">
            <a target="_blank" href="tel:0762319319">
            <div class="support-icon nt-rotate"><img class="support-icon--img" src="/wp-content/themes/swimtobelive/app/icon-hotline.png" alt="" style="width: 20px;"> </div>
            <span>0762 319 319</span></a>
        </div>
        
        <div class="fixed-btn fixed-btn-sm support-btn--zalo">
            <a target="_blank" href="//zalo.me/0762319319" title="Chat Zalo"><img class="support-icon--img nt-rotate" src="https://swimtobelive.com/wp-content/themes/swimtobelive/app/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://m.me/swimtobelive" title="Chat Facebook Messenger">
            <img class="support-icon--img nt-rotate" src="https://swimtobelive.com/wp-content/themes/swimtobelive/app/facebook-messenger.png" alt=""><span>Facebook</span></a>
        </div>
    </div>
</div>

<style>
.hotline-fixed {
    position: fixed;
    z-index: 1020;
    left: 20px;
    bottom: 120px;
    background: #0084ff;
    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 #0084ff;
    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;
}
.icon-whatsapp:before{content: "\e907";}
.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>

Xem thêm: Dịch vụ seo uy tín Nha Trang – Dịch vụ seo – Thiết kế webĐào tạo seo

Xem chi tiết