JSFiddle - React, Tailwind, and code Playground

by Ansmtz

HTML

<a class="btn-buy">Оформить</a>

CSS

.btn-buy {
    display: block;
    background-color: #010a43;
    border-radius: 16px;
    border: none;
    padding: 8px 16px;
    color: #ffc2c2;
    font-family: inherit;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1rem;
    margin-top: 5rem;
    font-size: .8rem;
    transition: all .8s cubic-bezier(0.39, 0.575, 0.565, 1);
    
}

.btn-buy:focus,
.btn-buy:hover {
    cursor: pointer;
    outline: none;
}
.btn-buy:active {
    transform: translateY(-30%);
}