JSFiddle - React, Tailwind, and code Playground

HTML

<form action="https://www.google.com/" target="_blank">
<button id="forma" class="button-mfa buttom-hero">Оформить заявку</button> 
</form>

CSS

.button-mfa{
    padding: 0px;
    margin: 23px 0px 0px 9px;
    width:150px;
    height: 45px;
    border-radius: 3px;
    color: #fff;
    outline:none;
    cursor: pointer;
    transition: 2s;
    display: block;
    position: relative;
    overflow: hidden;
    user-select: none;
}

.buttom-hero {
background-color: #be195e;
border: solid 1px #be195e;
}

.buttom-hero:hover {
    background-color: #a13361;
    border: solid 1px #a13361;
    }
    
    .button-mfa:hover {
    transition: 1s;
    color: #fff;
    box-shadow: 0px 0px 30px 5px #97154bc0;
}

button .active {
    background: #444;
  }
  .ripple {
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255,255,255,0.4);
    transform: scale(0);
    position: absolute;
    opacity: 1;
    animation: ripple 0.5s linear;
  }
  @keyframes ripple {
    100% {
     transform: scale(2);
     opacity: 0;
    }
  }

JavaScript

var links = document.querySelectorAll("button");
for(var i = 0; i < links.length; i++){
links[i].addEventListener('click', function (event) {
    event.preventDefault();

    // Remove any old one
    var ripple = document.querySelector('.ripple');
    if (ripple) {
        ripple.remove();
    }

    // Setup
    var buttonWidth = this.offsetWidth,
        buttonHeight = this.offsetHeight;

    // Make it round!
    if(buttonWidth >= buttonHeight) {
        buttonHeight = buttonWidth;
    } else {
        buttonWidth = buttonHeight;
    }

    // Get the center of the element
    var x = event.offsetX==undefined?event.layerX:event.offsetX - buttonWidth / 2,
        y = event.offsetY==undefined?event.layerY:event.offsetY - buttonHeight / 2;

    // Add the element
    var span = document.createElement('span');
    span.className = 'ripple';
    s = span.style;
    s.width = buttonWidth + 'px';
    s.height = buttonHeight + 'px';
    s.top = y + 'px';
    s.left = x + 'px';
    this.appendChild(span);
});
}