Button nút gọi Ring CSS

<div class='phone'>
<a href="#">
<div class="quick-alo-ph-circle"></div>
<div class="quick-alo-ph-circle-fill"></div>
<div class="quick-alo-ph-img-circle"></div>
</a>
</div>

.phone {
position: fixed;
bottom: 250px;
left: 0px;

}

.quick-alo-phone .quick-alo-show {

    visibility: visible;

}

.quick-alo-phone {

    position: fixed;

    visibility: hidden;

    background-color: transparent;

    height: 200px;

    width: 82px;

    height: 64px;

    right: 150px;

    top: 60%;

    cursor: pointer;

    z-index: 200000 !important;

    -webkit-backface-visibility: hidden;

    -webkit-transform: translateZ(0);

    transition: visibility .5s;

}

.quick-alo-phone .quick-alo-green .quick-alo-ph-circle {

    border-color: #00A1FF;

    opacity: 0.5;

}

.quick-alo-ph-circle {

    position: absolute;

    width: 160px;

    height: 160px;

    top: 50px;

    left: 50px;

    border: 2px solid #00A1FF;

    background-color: transparent;

    border-radius: 100%;

    opacity: .1;

    animation: quick-alo-circle-anim 1.2s infinite ease-in-out;

    transition: all .5s;

    transform-origin: 50% 50%;

}

.quick-alo-phone .quick-alo-green .quick-alo-ph-circle-fill {

    background-color: rgb(246, 202, 98);

    opacity: .75 !important;

}

.quick-alo-ph-circle-fill {

    position: absolute;

    width: 100px;

    height: 100px;

    top: 80px;

    left: 80px;

    background-color: rgba(0, 161, 255, 0.5);

    border-radius: 100%;

    border: 2px solid transparent;

    opacity: .1;

    animation: quick-alo-circle-fill-anim 2.3s infinite ease-in-out;

    transition: all .5s;

    transform-origin: 50% 50%;

}

.quick-alo-phone.quick-alo-green .quick-alo-ph-img-circle {

    background-color: #00A1FF;

}

.quick-alo-ph-img-circle {

    position: absolute;

    width: 60px;

    height: 60px;

    top: 100px;

    left: 100px;

    background: #00A1FF url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABrklEQVRYR82XjTEEQRCFX0dABlwEiAARkAEyIAJEoERACETARUAIJwIyeOqptfbm5qeP3lpTdVVXVzPd3/R0v+4zTLxsYv/4XwAkrwDsV6JyZmaLyKj1ESB5AOCpYfzazAQZttYFuDWz8zDvwE8OkNwF8NIwvjCz2SgAMkqSDuOzyDxYqgKSrwB2GhBKxHsHqGtLCiDDJ42Tj2Z27LLu2JQCnAK4a5x7M7Nth23XlhRgE8B74+SemempQtaKEpKsPUPo++sGOYCSIIU7zwJ05ficSLLkV6H/CIn7wEi2GRVkOVwFixEoREE/hz9DsR2TVKkp2zeSsI9bBUNnJNV4bhIA5cFhVCk2B5JCWVYhSEopjwAob6qa4QGQOKkqcj1iJSdIpmoqWEHIhr7Ph1BNgC4haxAPAC7UITPOc1UrCOXR12TlAnBAyKhAdHvPUg4pIn6AAYQc1ebG8QC+LXfD66XHU2HP7yKQlKhGODWu1gCTY/g7wCAaendNyltrRCQOIAERjCc/ejV1V4H3dp2ES4jU1vVJpXxpogoHSEE7oOEIp9G+/3c1OkArcpMDfAIqL6EhVS6JOAAAAABJRU5ErkJggg==") no-repeat center center;

    border-radius: 100%;

    border: 2px solid transparent;

    opacity: .99;

    animation: quick-alo-circle-img-anim 1s infinite ease-in-out;

    transform-origin: 50% 50%;

}

.quick-alo-phone .quick-alo-green .quick-alo-hover .quick-alo-ph-img-circle,

.quick-alo-phone.quick-alo-green:hover .quick-alo-ph-img-circle {

    background-color: #ff0101;

}

@-moz-keyframes quick-alo-circle-anim {

    0% {

        -moz-transform: rotate(0) scale(.5) skew(1deg);

        opacity: .1;

        -moz-opacity: .1;

        -webkit-opacity: .1;

        -o-opacity: .1

    }

    30% {

        -moz-transform: rotate(0) scale(.7) skew(1deg);

        opacity: .5;

        -moz-opacity: .5;

        -webkit-opacity: .5;

        -o-opacity: .5

    }

    100% {

        -moz-transform: rotate(0) scale(1) skew(1deg);

        opacity: .6;

        -moz-opacity: .6;

        -webkit-opacity: .6;

        -o-opacity: .1

    }

}

@-webkit-keyframes quick-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

    }

}

@-o-keyframes quick-alo-circle-anim {

    0% {

        -o-transform: rotate(0) kscale(.5) skew(1deg);

        -o-opacity: .1

    }

    30% {

        -o-transform: rotate(0) scale(.7) skew(1deg);

        -o-opacity: .5

    }

    100% {

        -o-transform: rotate(0) scale(1) skew(1deg);

        -o-opacity: .1

    }

}

@-moz-keyframes quick-alo-circle-fill-anim {

    0% {

        -moz-transform: rotate(0) scale(.7) skew(1deg);

        opacity: .2

    }

    50% {

        -moz-transform: rotate(0) -moz-scale(1) skew(1deg);

        opacity: .2

    }

    100% {

        -moz-transform: rotate(0) scale(.7) skew(1deg);

        opacity: .2

    }

}

@-webkit-keyframes quick-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

    }

}

@-o-keyframes quick-alo-circle-fill-anim {

    0% {

        -o-transform: rotate(0) scale(.7) skew(1deg);

        opacity: .2

    }

    50% {

        -o-transform: rotate(0) scale(1) skew(1deg);

        opacity: .2

    }

    100% {

        -o-transform: rotate(0) scale(.7) skew(1deg);

        opacity: .2

    }

}

@-moz-keyframes quick-alo-circle-img-anim {

    0% {

        transform: rotate(0) scale(1) skew(1deg)

    }

    10% {

        -moz-transform: rotate(-25deg) scale(1) skew(1deg)

    }

    20% {

        -moz-transform: rotate(25deg) scale(1) skew(1deg)

    }

    30% {

        -moz-transform: rotate(-25deg) scale(1) skew(1deg)

    }

    40% {

        -moz-transform: rotate(25deg) scale(1) skew(1deg)

    }

    50% {

        -moz-transform: rotate(0) scale(1) skew(1deg)

    }

    100% {

        -moz-transform: rotate(0) scale(1) skew(1deg)

    }

}

@-webkit-keyframes quick-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)

    }

}

@-o-keyframes quick-alo-circle-img-anim {

    0% {

        -o-transform: rotate(0) scale(1) skew(1deg)

    }

    10% {

        -o-transform: rotate(-25deg) scale(1) skew(1deg)

    }

    20% {

        -o-transform: rotate(25deg) scale(1) skew(1deg)

    }

    30% {

        -o-transform: rotate(-25deg) scale(1) skew(1deg)

    }

    40% {

        -o-transform: rotate(25deg) scale(1) skew(1deg)

    }

    50% {

        -o-transform: rotate(0) scale(1) skew(1deg)

    }

    100% {

        -o-transform: rotate(0) scale(1) skew(1deg)

    }

}

@-moz-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 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

    }

}

@-o-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

    }

}