JSFiddle - React, Tailwind, and code Playground

by Good Luck

HTML

<a class="buy-btn open-lightbox" href="https://vsebatuty.ru/catalog/batuty-s-setkoy/batut-hasttings-classic-green-6-ft-1-82-m/#cart-popup" id="addcart" productid="1293" price="12600" name="Батут Hasttings Classic Green 6 FT (1.82 м)" cardi="da" style="z-index: 1000;">
								<span class="ink animate" style="overflow: visible;height: 41px; width: 120px;z-index: 999;"></span>

								В корзину</a>

CSS

body{
  background-color:#888;
}
a{
  display: inline-block;
  padding: 10px;
  background-color: #0f0;
}
.ripplelink{
  text-align:center;
  color:#fff;
  text-decoration:none;
  position:relative;
  overflow:hidden;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  z-index:0;
}
 
.ripplelink:hover{
    z-index:1000;
}
 
.ink {
  display: block;
  overflow: hidden;
  position: absolute;
  
  background:rgba(255, 255, 255, 0.6);
  border-radius: 100%;
  -webkit-transform:scale(0);
     -moz-transform:scale(0);
       -o-transform:scale(0);
          transform:scale(0);
}
 
.animate {
  /*display: block;*/
    -webkit-animation:ripple 0.65s linear;
   -moz-animation:ripple 0.65s linear;
    -ms-animation:ripple 0.65s linear;
     -o-animation:ripple 0.65s linear;
        animation:ripple 2.65s linear;
        animation-iteration-count: infinite;
        animation-delay: 2s;
        
        
}
 
@-webkit-keyframes ripple {
    10% {opacity: 0; transform: scale(2.5);}
    100%{display:none;opacity:0; transform: scale(2.5);}
    
}
@-moz-keyframes ripple {
    10% {opacity: 0; transform: scale(2.5);}
    100%{display:none;opacity:0; transform: scale(2.5);}
}
@-o-keyframes ripple {
    10% {opacity: 0; transform: scale(2.5);}
    100%{display:none;opacity:0; transform: scale(2.5);}
}
@keyframes ripple {
    10% {opacity: 0; transform: scale(2.5);}
    100%{display:none;opacity:0; transform: scale(2.5);}
    
}