JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<div id="zornet_ru_mudersken">
  <div class="lomudsa_nsagevin">
    <p>zornet.ru</p>
    <span class="sakilan"></span>
    <span class="lasmigem"></span>
  </div>
  
  <div class="galogtus_abunes">
    <p>zornet.ru №2</p>
    <span class="t-slider1"></span>
    <span class="d-slider1"></span>
  </div>
</div>

CSS

* {
  margin: 0px;
  padding: 0px;
}

body {
  font-family: sans-serif;
}





#zornet_ru_mudersken {
  width: 500px;
  height: auto;
  margin: 50px auto;
}

/* first button slider css styles */

.lomudsa_nsagevin {
   width: 300px;
  height: auto;
  border: 3px solid #bb0000;
  padding: 20px;
  margin: 30px auto;
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  position: relative;
  overflow:hidden;
  cursor: pointer;
  font-size: 24px;
  color: #bb0000;
  box-sizing: border-box;
}

.lomudsa_nsagevin p {
  position: relative;
  z-index: 999;
}

.lomudsa_nsagevin:hover {
  color: #fff;
}

.lomudsa_nsagevin .sakilan {
  width: 100%;
  background-color: #bb0000;
  height: 60px;
  position: absolute;
  top: -98px;
  left: 0px;
  transform: skewY(10deg);
  transition: all 0.7s;
}

.lomudsa_nsagevin .lasmigem {
  width: 100%;
  background-color: #bb0000;
  height: 68px;
  position: absolute;
  top: 98px;
  left: 0px;
  transform: skewY(10deg);
  transition: all 0.7s;
}

.lomudsa_nsagevin:hover .sakilan {
  top: -30px;
  transition: all 0.7s;
}

.lomudsa_nsagevin:hover .lasmigem {
  top: 29px;
  transition: all 0.7s;
}

/* second button slider css styles */

.galogtus_abunes {
  width: 300px;
  height: auto;
  border: 3px solid #bb0000;
  padding: 20px;
  margin: 30px auto;
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  position: relative;
  overflow:hidden;
  cursor: pointer;
  font-size: 24px;
  color: #bb0000;
  box-sizing: border-box;
}

.galogtus_abunes p {
  position: relative;
  z-index: 999;
}

.galogtus_abunes:hover {
  color: #fff;
}

.galogtus_abunes .t-slider1 {
  width: 100%;
  background-color: #bb0000;
  height: 60px;
  position: absolute;
  top: -98px;
  left: 0px;
  transform: skewY(-10deg);
  transition: all 0.7s;
}

.galogtus_abunes .d-slider1 {
  width: 100%;
  background-color: #bb0000;
  height: 68px;
  position: absolute;
  top: 98px;
  left: 0px;
  transform: skewY(-10deg);
  transition: all...