JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<div class="zornet_ru_gsamirga"> 
<a target="_blank" href="http://zornet.ru"> 
<span>Logitech уже много лет выпускает динамики ПК, но ни у кого из них не было RGB-индикаторов. У них много власти, но и много RGB. Разве это не то, что вы хотите в новых динамиках.</span> 
</a>  
</div>

CSS

.zornet_ru_gsamirga a:before,.zornet_ru_gsamirga a:after,.zornet_ru_gsamirga a:hover span{ 
-webkit-transition: all .4s ease-out; 
-moz-transition: all .4s ease-out; 
  -o-transition: all .4s ease-out; 
transition: all .4s ease-out; 
} 
.zornet_ru_gsamirga a {
    position: relative;
    overflow: hidden;
    padding: 14px;
    display: inline-block;
    color: #2f2c2c;
    text-decoration: none;
    width: 300px;
    background: #e2dada;
    border: 2px solid #becbe4;
    border-radius: 3px;
}
.zornet_ru_gsamirga a:hover span{ 
position: relative; 
z-index: 1; 
} 
.zornet_ru_gsamirga a:hover span{ 
color:#f9f4f4 
} 
.zornet_ru_gsamirga a:before,.zornet_ru_gsamirga a:after{ 
content:''; 
position:absolute; 
width:299%; 
height:99%; 
-moz-transform: skew(-30deg, 0deg); 
-o-transform: skew(-30deg, 0deg); 
-webkit-transform: skew(-30deg, 0deg); 
-ms-transform: skew(-30deg, 0deg); 
transform: skew(-30deg, 0deg); 
z-index:0; 
} 
.zornet_ru_gsamirga a:before {
    top: 0;
    left: 199%;
    background: #132cad;
}
.zornet_ru_gsamirga a:after{ 
top:0; 
right:199%; 
background:#132cad; 
} 
.zornet_ru_gsamirga a:hover:after{ 
right:49%; 
} 
.zornet_ru_gsamirga a:hover:before{ 
left:49%; 
}