Tạo nút hotline nổi bật ở góc website

    Copy đoạn mã dưới đây, thay số điện thoại mình muốn vào và gắn vào website

    <style>.fix_tel{top:auto;bottom:auto;right:auto;left:auto;bottom:15px;right:5px}
    .fix_tel{position:fixed;bottom:15px;right:0;z-index:999}.fix_tel .ring-alo-phone.ring-alo-show{visibility:visible}
    .fix_tel .ring-alo-phone{background-color:transparent;cursor:pointer;height:80px;position:absolute;transition:visibility .5s ease 0s;visibility:hidden;width:80px;z-index:200000!important}.fix_tel .tel{background-color:#022b5f}
    .fix_tel .tel{background:#eee;width:205px;height:40px;position:relative;overflow:hidden;background-size:40px;border-radius:28px;border:solid 1px #ccc}.fix_tel .ring-alo-phone.ring-alo-green .ring-alo-ph-circle{border-color:#022b5f}
    .fix_tel .ring-alo-phone.ring-alo-green .ring-alo-ph-circle{background-color:#022b5f}.fix_tel .ring-alo-phone.ring-alo-green .ring-alo-ph-circle{border-color:red;opacity:.5}
    .fix_tel .ring-alo-ph-circle{-webkit-animation:1.2s ease-in-out 0s normal none infinite running ring-alo-circle-anim;-moz-animation:1.2s ease-in-out 0s normal none infinite running ring-alo-circle-anim;animation:1.2s ease-in-out 0s normal none infinite running ring-alo-circle-anim;background-color:transparent;border:2px solid rgba(30,30,30,.4);border-radius:100%;height:70px;left:10px;opacity:.1;position:absolute;top:12px;transform-origin:50% 50% 0;transition:all .5s ease 0s;width:70px}
    .fix_tel .ring-alo-phone.ring-alo-green .ring-alo-ph-circle-fill{background-color:rgba(0,175,242,.5);opacity:.75!important}.fix_tel .ring-alo-ph-circle-fill{-webkit-animation:2.3s ease-in-out 0s normal none infinite running ring-alo-circle-fill-anim;-moz-animation:2.3s ease-in-out 0s normal none infinite running ring-alo-circle-fill-anim;animation:2.3s ease-in-out 0s normal none infinite running ring-alo-circle-fill-anim;background-color:#000;border:2px solid transparent;border-radius:100%;height:30px;left:30px;opacity:.1;position:absolute;top:33px;transform-origin:50% 50% 0;transition:all .5s ease 0s;width:30px}.fix_tel .ring-alo-phone.ring-alo-green .ring-alo-ph-img-circle{background-color:#022b5f}.fix_tel .ring-alo-phone.ring-alo-green .ring-alo-ph-img-circle{background-color:red}.fix_tel .ring-alo-ph-img-circle{-webkit-animation:1s ease-in-out 0s normal none infinite running ring-alo-circle-img-anim;-moz-animation:1s ease-in-out 0s normal none infinite running ring-alo-circle-img-anim;animation:1s ease-in-out 0s normal none infinite running ring-alo-circle-img-anim;border:2px solid transparent;border-radius:100%;height:30px;left:30px;opacity:1;position:absolute;top:30px;transform-origin:50% 50% 0;width:30px}.fix_tel a{text-decoration:none;display:block}.fix_tel .ring-alo-ph-img-circle a img{padding:1px 0 0 1px;width:30px;position:relative;top:-1px}.fix_tel .fone{color:red}.fix_tel .fone{font-size:22px;line-height:40px;font-weight:700;padding-left:45px;margin:0 0}@keyframes ring-alo-circle-anim{0%{opacity:.1;transform:rotate(0) scale(.5) skew(1deg)}30%{opacity:.5;transform:rotate(0) scale(.7) skew(1deg)}100%{opacity:.6;transform:rotate(0) scale(1) skew(1deg)}}@keyframes ring-alo-circle-img-anim{0%{transform:rotate(0) scale(1) skew(1deg)}10%{transform:rotate(-25deg) scale(1) skew(1deg)}20%{transform:rotate(25deg) scale(1) skew(1deg)}30%{transform:rotate(-25deg) scale(1) skew(1deg)}40%{transform:rotate(25deg) scale(1) skew(1deg)}50%{transform:rotate(0) scale(1) skew(1deg)}100%{transform:rotate(0) scale(1) skew(1deg)}}@keyframes ring-alo-circle-fill-anim{0%{opacity:.2;transform:rotate(0) scale(.7) skew(1deg)}50%{opacity:.2;transform:rotate(0) scale(1) skew(1deg)}100%{opacity:.2;transform:rotate(0) scale(.7) skew(1deg)}}.fix_tel .ring-alo-ph-img-circle a img{padding:1px 0 0 1px;width:30px;position:relative;top:-1px}</style>
    
    <div class="fix_tel">
        <div class="ring-alo-phone ring-alo-green ring-alo-show" id="ring-alo-phoneIcon"
             style="right: 150px; bottom: -12px;">
            <div class="ring-alo-ph-circle"></div>
            <div class="ring-alo-ph-circle-fill"></div>
            <div class="ring-alo-ph-img-circle">
    
                <a href="tel:0904891688">
                    <img class="lazy"
                         src="https://daiphunnuoc.pro/wp-content/plugins/easy-call-now/public/images/phone-ring.png"
                         alt="<php _e('Click to Call','call-now'); ?>">
                    <noscript>&amp;lt;img
                        src="https://daiphunnuoc.pro/wp-content/plugins/easy-call-now/public/images/phone-ring.png" alt=""&amp;gt;
                    </noscript>
                </a>
            </div>
        </div>
        <div class="tel">
            <a href="tel:0904891688" class="fone">0766.313.848</a>
        </div>
    </div>
    
    
    0/5 (0 Reviews)

    Hãy liên hệ ngay 0987.519.120 để được tư vấn miễn phí !

    Hotline: 0987519120


    Facebook

    Zalo: 0987519120

    ×
    Phản hồi trong vòng một phút
    logo
    Xin chào! Anh chị cần thiết kế web phải không ạ?
    logo
    Anh chị có thể chat ngay với Hobasoft tại đây!
    Click để chat!
    Kết nối với Hobasoft trong Messenger