JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<a href="#" class="zornet_rugadem kinersavunga"><span>ZORNET.RU â„– 2</span></a>

CSS

.kinersavunga {
    width: 195px;
    padding: 18px;
    display: inline-block;
    vertical-align: top;
    border-radius: 98px;
    text-decoration: none;
    text-align: center;
    color: #e6e2e2;
    border: 2px solid #b9b8b8;
    position: relative;
    background: #1d1b1b;
    overflow: hidden;
}

.kinersavunga span{
	position:relative;
	z-index:5;
}

.zornet_rugadem:before, .zornet_rugadem:after {
    width: 0;
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    bottom: 0;
    background: #cc0e0e;
    transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 0.88);
    -webkit-transition: all 0.3s cubic-bezier(0.25, 0.1, 0.21, 0.79);
    -moz-transition: all 0.3s ease;
}
.zornet_rugadem:after{
	left:auto;
	right:0;
}
.zornet_rugadem:hover:before,
.zornet_rugadem:hover:after{ width:50%; }