JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<div class="salohsarunimg">
      <a href="#" class="tkinsa_gterda zornet_ru_lodsa">ZORNET.RU</a>
</div>

CSS

.salohsarunimg {
  text-align: center;
}
a {
  text-align: center;
  margin: 0 auto;
  float: none;
  margin-top: 49px;
}
.tkinsa_gterda {
    position: relative;
    z-index: 1;
    display: inline-block;
    padding: 12px 36px;
    color: #f5f1f1;
    font-family: "Open Sans", Geneva, sans-serif;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px; 
}
.tkinsa_gterda::after {
        position: absolute;
        content: '';
        z-index: -1;
        width: 0%;
        height: 100%;
        top: 0;
        left: 0;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease; 
}
.tkinsa_gterda:hover::after, 
.tkinsa_gterda:active::after {
        width: 100%; 
}
.zornet_ru_lodsa {
    background: #131212;
    color: #fbf5f5; 
}
.zornet_ru_lodsa::after {
        background: #254aa0; 
}
.zornet_ru_lodsa:visited {
        color: #fdf5f5; 
}
.zornet_ru_lodsa:hover {
        color: #fbf7f7; 
}