JSFiddle - React, Tailwind, and code Playground

by thanhansoft

HTML

<a href="tel:0942.001.001" title="Hotline" class="fdola-pgone-red">0942.001.001<span></span></a>

CSS

.fdola-pgone-red{
    color: #fff;
    background: #eb021d;
    height: 30px;
    line-height: 30px;
    font-size: 19px;
    font-weight: bold;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    position: fixed;
    bottom: 10px;
    left: 10px;
    padding-right: 10px;
    text-decoration:none
}
.fdola-pgone-red:hover{
  color:#ff0
}
.fdola-pgone-red span {
    width: 30px;
    height: 30px;
    display: block;
    float: left;
    background-image: url(phone-hotline.png);
    background-size: 30px 30px;
    background-position: top left;
    background-repeat: no-repeat;
    -webkit-animation-name: hvr-buzz;
    animation-name: hvr-buzz;
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    margin-right: 5px;
}
/* Buzz */
@-webkit-keyframes hvr-buzz {
  50% {
    -webkit-transform: translateX(0px) rotate(20deg);
    transform: translateX(0px) rotate(20deg);
  }

  100% {
    -webkit-transform: translateX(0px) rotate(-20deg);
    transform: translateX(0px) rotate(-20deg);
  }
}

@keyframes hvr-buzz {
  50% {
    -webkit-transform: translateX(0px) rotate(20deg);
    transform: translateX(0px) rotate(20deg);
  }

  100% {
    -webkit-transform: translateX(0px) rotate(-20deg);
    transform: translateX(0px) rotate(-20deg);
  }
}