JSFiddle - React, Tailwind, and code Playground

by Ayri Rin

HTML

<a href="#" class="buy-ticket">Придбати квиток <span>35 <span>грн</span></span></a>

CSS

.buy-ticket {
display: inline-block;
    height: 50px;
    line-height: 50px;
    color: #171614;
    padding: 0 0 0 20px;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 18px;
    font-family: "FuturaMediumC";
    box-shadow: -2px 4px 10px 0px rgba(38, 38, 38, 0.26);
    transition: opacity 0.3s linear !important;
    position: relative;
    z-index: 1;

}
.buy-ticket span {
    color: #c19f63;
    background: #ededed;
    padding: 0 30px;
    margin-left: 20px;
    display: block;
    float: right;
}
.buy-ticket span span {
    font-size: 14px;
    padding: 0;
    margin: 0 0 0 5px;
    text-transform: lowercase;
}
.buy-ticket:after {
  content: '';
       position: absolute;
    z-index: -1;
    transition: all 0.3s;
    background: rgba(172, 148, 85, 0.95);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin: right;
    transform: scale(0,1);
    transition: transform 1s cubic-bezier(.2,0.95,.4,0.95), background-size 1s ease;
    overflow:hidden;
}
.buy-ticket:hover {
    color: #fff;
}
.buy-ticket:hover:after {
  width: 100%;
    transform: scale(1,1);
    transform-origin: left;
}