Chia sẻ code nút call và phone number hiệu ứng cực đỉnh hoàn toàn bằng CSS - 123SHARE

    Chào các bạn, hôm nay mình sẻ đến các bạn code của nút call và phone number cực đỉnh hoàn toàn bằng css, rất thích hợp để sử dụng ở các blog, trang web bán hàng hoặc làm dịch vụ...
    Chia sẻ code nút call và phone number hiệu ứng cực đỉnh hoàn toàn bằng css

    Chia sẻ thật với các bạn là code này mình lấy bên blog của anh Huỳnh Phụng (toilaquantri.com) nhưng không thấy anh ấy sử dụng nữa nên mình đem share cho các bạn. 

    XEM DEMO NGAY

    Các bạn sử dụng như sau: Coppy toàn bộ code phía dưới và dán lên trên thẻ đóng /body
    Sau đó sửa thông tin số điện thoại của mình lại là được rồi.
    <div class='hotline'>
    <div class='phonering-alo-phone phonering-alo-green phonering-alo-show' id='phonering-alo-phoneIcon'>
    <div class='phonering-alo-ph-circle'/>
    <div class='phonering-alo-ph-circle-fill'/>
    <div class='phonering-alo-ph-img-circle'>
    <a class='pps-btn-img ' href='tel:0984.541.045' title='Liên hệ'>
    <img alt='Liên hệ' class='img-responsive' src='https://3.bp.blogspot.com/-jipOkVbgvtk/WPd_CdNwOoI/AAAAAAAAEn0/iYoBqhrSHWgSGDOiEvvEzTYa-khhJt9NACLcB/s1600/v8TniL3.png' width='50'/>
    </a>
    </div>
    </div>
    </div>
    <style>
    #call {    display: block;
        position: fixed;
        bottom: 15px;
        left: 45px;
        z-index: 99;
        border: none;
        outline: none;
        background-color: #e51218;
        color: #fff;
        cursor: pointer;
        padding: 7px 20px 7px 30px;
        border-radius: 0 32px;
        font-weight: 700;
        font-size: 18px;
    }
    /* HOTLINE */
    .phonering-alo-phone {position:fixed;visibility:hidden;background-color:transparent;width:200px;height:200px;
     cursor:pointer;z-index:200000!important;right:150px;bottom:-60px;left:-75px;display:block;
     -webkit-backface-visibility:hidden;
     -webkit-transform:translateZ(0);
     transition:visibility .5s;
    }
    .phonering-alo-phone.phonering-alo-show {visibility:visible}
    .phonering-alo-phone.phonering-alo-static {opacity:.6}
    .phonering-alo-phone.phonering-alo-hover,.phonering-alo-phone:hover {opacity:1}
    .phonering-alo-ph-circle {width:140px;height:140px;top:35px;left:35px;position:absolute;
     background-color:transparent;border-radius:100%;border:2px solid rgba(30,30,30,0.4);
     opacity:.1;
     -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%
    }
    .phonering-alo-phone.phonering-alo-active .phonering-alo-ph-circle {
        -webkit-animation:phonering-alo-circle-anim 1.1s infinite ease-in-out!important;
        animation:phonering-alo-circle-anim 1.1s infinite ease-in-out!important
    }
    .phonering-alo-phone.phonering-alo-static .phonering-alo-ph-circle {
        -webkit-animation:phonering-alo-circle-anim 2.2s infinite ease-in-out!important;
        animation:phonering-alo-circle-anim 2.2s infinite ease-in-out!important
    }
    .phonering-alo-phone.phonering-alo-hover .phonering-alo-ph-circle,.phonering-alo-phone:hover .phonering-alo-ph-circle {
        border-color:red;
        opacity:.5
    }
    .phonering-alo-phone.phonering-alo-green.phonering-alo-hover .phonering-alo-ph-circle,.phonering-alo-phone.phonering-alo-green:hover .phonering-alo-ph-circle {
        border-color:#5ca038;
        opacity:.5
    }
    .phonering-alo-phone.phonering-alo-green .phonering-alo-ph-circle {
        border-color:red;
        opacity:.5
    }
    .phonering-alo-phone.phonering-alo-gray.phonering-alo-hover .phonering-alo-ph-circle,.phonering-alo-phone.phonering-alo-gray:hover .phonering-alo-ph-circle {
        border-color:#ccc;
        opacity:.5
    }
    .phonering-alo-phone.phonering-alo-gray .phonering-alo-ph-circle {
        border-color:#75eb50;
        opacity:.5
    }
    .phonering-alo-ph-circle-fill {width:80px;height:80px;top:65px;left:65px;position:absolute;background-color:#000;
     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%
    }
    .phonering-alo-phone.phonering-alo-active .phonering-alo-ph-circle-fill {
        -webkit-animation:phonering-alo-circle-fill-anim 1.7s infinite ease-in-out!important;
        animation:phonering-alo-circle-fill-anim 1.7s infinite ease-in-out!important
    }
    .phonering-alo-phone.phonering-alo-static .phonering-alo-ph-circle-fill {
        -webkit-animation:phonering-alo-circle-fill-anim 2.3s infinite ease-in-out!important;
        animation:phonering-alo-circle-fill-anim 2.3s infinite ease-in-out!important;
        opacity:0!important
    }
    .phonering-alo-phone.phonering-alo-hover .phonering-alo-ph-circle-fill,.phonering-alo-phone:hover .phonering-alo-ph-circle-fill {
        background-color:rgba(39,45,107,0.5);
        opacity:.75!important
    }
    .phonering-alo-phone.phonering-alo-green.phonering-alo-hover .phonering-alo-ph-circle-fill,.phonering-alo-phone.phonering-alo-green:hover .phonering-alo-ph-circle-fill {
        background-color:rgba(39,45,107,0.5);
        opacity:.75!important
    }
    .phonering-alo-phone.phonering-alo-green .phonering-alo-ph-circle-fill {
        background-color:rgba(0,175,242,0.5);
    }
    .phonering-alo-phone.phonering-alo-gray.phonering-alo-hover .phonering-alo-ph-circle-fill,.phonering-alo-phone.phonering-alo-gray:hover .phonering-alo-ph-circle-fill {
        background-color:rgba(204,204,204,0.5);
        opacity:.75!important
    }
    .phonering-alo-phone.phonering-alo-gray .phonering-alo-ph-circle-fill {
        background-color:rgba(117,235,80,0.5);
        opacity:.75!important
    }
    .phonering-alo-ph-img-circle {
        width:50px;
        height:50px;
        top:80px;
        left:80px;
        position:absolute;
        background:rgba(30,30,30,0.1) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAABNmlDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjarY6xSsNQFEDPi6LiUCsEcXB4kygotupgxqQtRRCs1SHJ1qShSmkSXl7VfoSjWwcXd7/AyVFwUPwC/0Bx6uAQIYODCJ7p3MPlcsGo2HWnYZRhEGvVbjrS9Xw5+8QMUwDQCbPUbrUOAOIkjvjB5ysC4HnTrjsN/sZ8mCoNTIDtbpSFICpA/0KnGsQYMIN+qkHcAaY6addAPAClXu4vQCnI/Q0oKdfzQXwAZs/1fDDmADPIfQUwdXSpAWpJOlJnvVMtq5ZlSbubBJE8HmU6GmRyPw4TlSaqo6MukP8HwGK+2G46cq1qWXvr/DOu58vc3o8QgFh6LFpBOFTn3yqMnd/n4sZ4GQ5vYXpStN0ruNmAheuirVahvAX34y/Axk/96FpPYgAAACBjSFJNAAB6JQAAgIMAAPn/AACA6AAAUggAARVYAAA6lwAAF2/XWh+QAAAB/ElEQVR42uya7W3CMBCG31QM4A1aNggTlG6QbpBMkHYC1AloJ4BOABuEDcgGtBOETnD9c1ERCH/lwxeaV8oPFGP86Hy+DxMREW5Bd7gRjSDSNGn4/RiAOvm8C0ZCRD5PSkQVXSr1nK/xE3mcWimA1ZV3JYBZCIO4giQANoYxMwYS6+xKY4lT5dJPreWZY+uspqSCKPYN27GJVBDXheVSQe494ksiEWTuMXcu1dld9SARxDX1OAJ4lgjy4zDnFsC076A4adEiRwAZg4hOUSpNoCsBPDGM+HqkNGynYBCuILuWj+dgWysGsNe8nwL4GsrW0m2fxZBq9rW0rNcX5MOQ9eZD8JFahcG5g/iKT671alGAYQggpYWvpEPYWrU/HDTOfeRIX0q2SL3QN4tGhZJukVobQyXYWw7WtLDKDIuM+ZSzscyCE9PCy5IttCvnZNaeiGLNHKuz8ZVh/MXTVu/1xQKmIqLEAuJ0fNo3iG5B51oSkeKnsBi/4bG9gYB/lCytU5G9DryFW+3Gm+JLwU7ehbJrwTjq4DJU8bHcVbEV9dXXqqP6uqO5e2/QZRYJpqu2IUAA4B3tXvx8hgKp05QZW6dJqrLTNkB6vrRURLRwPHqtYgkC3cLWQAcDQGGKH13FER/NATzi786+BPDNjm1dMkfjn2pGkBHkf4D8DgBJDuDHx9BN+gAAAABJRU5ErkJggg==) no-repeat center center;
        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%
    }
    .phonering-alo-phone.phonering-alo-active .phonering-alo-ph-img-circle {
        -webkit-animation:phonering-alo-circle-img-anim 1s infinite ease-in-out!important;
        animation:phonering-alo-circle-img-anim 1s infinite ease-in-out!important
    }
    .phonering-alo-phone.phonering-alo-static .phonering-alo-ph-img-circle {
        -webkit-animation:phonering-alo-circle-img-anim 0 infinite ease-in-out!important;
        animation:phonering-alo-circle-img-anim 0 infinite ease-in-out!important
    }
    .phonering-alo-phone.phonering-alo-hover .phonering-alo-ph-img-circle,.phonering-alo-phone:hover .phonering-alo-ph-img-circle {
        background-color:red;
    }
    .phonering-alo-phone.phonering-alo-green.phonering-alo-hover .phonering-alo-ph-img-circle,.phonering-alo-phone.phonering-alo-green:hover .phonering-alo-ph-img-circle {
        background-color:#5ca038;
    }
    .phonering-alo-phone.phonering-alo-green .phonering-alo-ph-img-circle {
        background-color:red;
    }
    .phonering-alo-phone.phonering-alo-gray.phonering-alo-hover .phonering-alo-ph-img-circle,.phonering-alo-phone.phonering-alo-gray:hover .phonering-alo-ph-img-circle {
        background-color:#ccc;
    }
    .phonering-alo-phone.phonering-alo-gray .phonering-alo-ph-img-circle {
        background-color:#75eb50
    }
    @-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 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>
    <a href='tel:0984541045' id='call'> 0984.541.045</a>
    Ưu điểm của nó là hoàn toàn bằng css nên các bạn không phải lo ngại gì về vấn đề load nhé! Chúc các bạn thành công! Thank for watching!
    Nội dung chính