JSFiddle - React, Tailwind, and code Playground

HTML

<div><a class="redBuyButton" href="#">Button</a></div>

CSS

div {
  display: flex;
  justify-content: center;
  align-items: center;
}

@keyframes boxShadowPulse {
    0% {
        box-shadow: 0 0 70px 15px #ff3133;
    }
    50% {
        box-shadow: 0 0 50px 10px #ff3133;
    }
    100% {
        box-shadow: 0 0 70px 15px #ff3133;
    }
}


.redBuyButton {
    width: 250px;
    padding: 10px 0;
    text-align: center;
    text-decoration: none;
    display: block;
    color: #fff;
    font-size: 3rem;
    border-radius: 5px;
    background: #ff3133;
    margin: 120px auto 0 auto;
    transition: all .3s linear;
}


.redBuyButton:hover,
.redBuyButton:focus {
    box-shadow: 0 0 70px 15px #ff3133;
    animation: boxShadowPulse 1.5s linear .3s infinite;
}