JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<a class="zornet_ru_gumin" href="#">
  <div class="tunidsakersa">
    <div class="vesazkumil">Сайт</div>
    <div class="tunonad">ZORNET.RU</div>
  </div>
</a>

CSS

.zornet_ru_gumin {
    height: 70px;
    width: 250px;
    display: inline-block;
    text-decoration: none;
    color: #f9efef;
    overflow: hidden;
    position: relative;
    font-family: helvetica;
    font-weight: bold;
    letter-spacing: 3px;
    text-transform: uppercase;
    border-radius: 53px;
    border: none;
    margin-right: 65px;
}
.tunidsakersa {
  position: absolute;
  transition: all 0.5s ease;
  top: 0;
}
.tunidsakersa div {
  height: 70px;
  width: 250px;
  text-align: center;
  font-size: 27px;
  line-height: 70px;
}
.zornet_ru_gumin:hover .tunidsakersa { top: -70px; transition: all 0.3s ease; }
.vesazkumil { background-color: #2e880e; }
.tunonad { background-color: #821260; }