JSFiddle - React, Tailwind, and code Playground

by Mukul kant

HTML

<a href="#" class="Btn buzzEN">Click here</a>
<a href="#" class="Btn buzzTime">Click here</a>

CSS

.Btn{
	width: 100px;
	background: red;
	text-align: center;
	color: #fff;
	padding: 10px 0;
}

@keyframes buzzEN {
  50% {
      transform: translateX(3px) rotate(2deg);
  }

  100% {
    transform: translateX(-3px) rotate(-2deg);
  }
}
.buzzEN {
  display: inline-block; 
}
.buzzEN:hover{
  animation: buzzEN 0.12s linear infinite;
}

@keyframes buzzTime {
  10% {  
    transform: translateX(3px) rotate(2deg);
  }
  20% {
       transform: translateX(-3px) rotate(-2deg);
  }
  30% {
       transform: translateX(3px) rotate(2deg);
  }
  40% {
        transform: translateX(-3px) rotate(-2deg);
  }
  50% {
   
    transform: translateX(2px) rotate(1deg);
  }
  60% {

    transform: translateX(-2px) rotate(-1deg);
  }
  70% {
    transform: translateX(2px) rotate(1deg);
  }

  80% {
    transform: translateX(-2px) rotate(-1deg);
  }
  90% {

    transform: translateX(1px) rotate(0);
  }
  100% {
    transform: translateX(-1px) rotate(0);
  }
}

.buzzTime {
  display: inline-block;
}
.buzzTime:hover{
   animation:1 buzzTime  0.7s linear; 
}