JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<div class="bartumin">
    <p class="rimogsa_tumerg">ZORNET</p>
    <div class="tersamil_desma">
      <p class="rnimag_zornet">RU</p>
    </div>
 </div>

CSS

.bartumin {
  background: #3c4144;
  margin : 15px auto;
  width : 193px;
  height : 47px;
  overflow: hidden;
  text-align : center;
  transition : .2s;
  cursor : pointer;
  box-shadow: 0px 1px 2px rgba(14, 14, 14, 0.28);
  border-radius: 3px;
}
.tersamil_desma {
  position : relative;
  width : 187px;
  height : 99px;
  margin-top: -97px;
  padding-top: 2px;
  background : #307db5;
  left : -249px;
  transition : .3s;
}
.rimogsa_tumerg {
  color: #fbf9f9;
  transition : .3s;
}
.rnimag_zornet {
  margin-top : 63px;
  margin-right : -130px;
  color : #fdf7f7;
}
.bartumin:hover .tersamil_desma{ 
  left: -130px;
}
.bartumin:hover .rimogsa_tumerg{  
.rimogsa_tumerg
  margin-left : 65px;
}
.bartumin:active { 
  box-shadow: 0px 5px 5px rgba(0,0,0,0.4);
}