JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<a href="#" class="romitunag zolarunim"><span>ZORNET.RU</span></a>

CSS

.zolarunim {
    width: 195px;
    padding: 17px;
    display: inline-block;
    vertical-align: top;
    border-radius: 75px;
    text-decoration: none;
    text-align: center;
    color: #fbf8f8;
    border: 3px solid #9e9e9e;
    position: relative;
    background: #1f2021;
    overflow: hidden;
}
.romitunag:before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #0777d6;
    border-radius: 53px;
    transition: all 0.3s cubic-bezier(0, 0, 0.48, 0.92);
    -webkit-transition: all 0.3s cubic-bezier(0, 0, 0.86, 0.57);
    -moz-transition: all 0.3s ease-out;
    transform: scaleX(0);
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
}
.romitunag:hover:before{
	transform:scaleX(1);
	-webkit-transform:scaleX(1);
	-moz-transform:scaleX(1);
}
.zolarunim span{
	position:relative;
	z-index:5;
}