JSFiddle - React, Tailwind, and code Playground

by thanhansoft

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="callNowButton">
<i class="fa fa-phone" aria-hidden="true"></i>
	<a href="tel:02862755426" title="02862 755 426"><span>0251 123 4562</span>			</a>
</div>

CSS

.callNowButton {
    position: fixed;
    left: 2px;
    bottom: 10px;
    border-radius: 22px;
    color: #fff;
    height: 40px;
    line-height: 40px;
    padding: 0 10px 0 0;
    background: #009900;
    z-index: 9999;
}
.callNowButton a {
    text-decoration: none;
    outline: none;
    color: #fff;
    font-weight:600
}
.callNowButton:hover{ 
animation: shake 0.5s; 
    /* When the animation is finished, start again */
    animation-iteration-count: infinite; 
}
.callNowButton a:hover {


    color: #ff0;
}
.callNowButton span {
    font-size: 15px;
}
.callNowButton i {
    margin-right: 5px;
    margin-top: -1px;
    margin-left: -1px;
    border: 2px solid #fff;
    border-radius: 50%;
    display: inline-block;
    width: 38px;
    height: 38px;
  line-height:38px;
  font-size:1.5rem;
  text-align:center;
    float: left;
}
@keyframes shakeanimation {
  15%, 85% {
    transform: translate3d(-2px, 0, 0);
  }
  
  25%, 75% {
    transform: translate3d(4px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-8px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(8px, 0, 0);
  }
}
@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}