Call Button 1

quick alo phone

HTML

<div class="quick-alo-phone quick-alo-green quick-alo-show" id="quick-alo-phoneIcon" style="left: 0px; top: 50%;">
  <a href="tel:099999" title="Liên hệ nhanh">
  <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>

CSS

.quick-alo-phone.quick-alo-static {
opacity:.6;
}

.quick-alo-phone.quick-alo-hover,
.quick-alo-phone:hover {
opacity:1;
}

.quick-alo-ph-circle {
width:160px;
height:160px;
top:20px;
left:20px;
position:absolute;
background-color:transparent;
-webkit-border-radius:100%;
-moz-border-radius:100%;
border-radius:100%;
border:2px solid rgba(30,30,30,0.4);
border:2px solid #bfebfc 9;
opacity:.1;
-webkit-animation:quick-alo-circle-anim 1.2s infinite ease-in-out;
-moz-animation:quick-alo-circle-anim 1.2s infinite ease-in-out;
-ms-animation:quick-alo-circle-anim 1.2s infinite ease-in-out;
-o-animation:quick-alo-circle-anim 1.2s infinite ease-in-out;
animation:quick-alo-circle-anim 1.2s infinite ease-in-out;
-webkit-transition:all .5s;
-moz-transition:all .5s;
-o-transition:all .5s;
transition:all .5s;
-webkit-transform-origin:50% 50%;
-moz-transform-origin:50% 50%;
-ms-transform-origin:50% 50%;
-o-transform-origin:50% 50%;
transform-origin:50% 50%;
}

.quick-alo-phone.quick-alo-active .quick-alo-ph-circle {
-webkit-animation:quick-alo-circle-anim 1.1s infinite ease-in-out !important;
-moz-animation:quick-alo-circle-anim 1.1s infinite ease-in-out !important;
-ms-animation:quick-alo-circle-anim 1.1s infinite ease-in-out !important;
-o-animation:quick-alo-circle-anim 1.1s infinite ease-in-out !important;
animation:quick-alo-circle-anim 1.1s infinite ease-in-out !important;
}

.quick-alo-phone.quick-alo-static .quick-alo-ph-circle {
-webkit-animation:quick-alo-circle-anim 2.2s infinite ease-in-out !important;
-moz-animation:quick-alo-circle-anim 2.2s infinite ease-in-out !important;
-ms-animation:quick-alo-circle-anim 2.2s infinite ease-in-out !important;
-o-animation:quick-alo-circle-anim 2.2s infinite ease-in-out !important;
animation:quick-alo-circle-anim 2.2s infinite ease-in-out !important;
}

.quick-alo-phone.quick-alo-hover .quick-alo-ph-circle,
.quick-alo-phone:hover .quick-alo-ph-circle...