JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<button class="katbazolnagem">ZORNET.RU #1</button>
<button class="katbazolnagem vtoryznakedog">ZORNET.RU #2</button>
<button class="katbazolnagem trenuksazqebun">ZORNET.RU #3</button>
<button class="katbazolnagem laxnezakiped">ZORNET.RU #4</button>

CSS

.katbazolnagem {
    color: #504e4e;
    text-shadow: 0 1px 0 #f1e6e6;
    outline: none;
    background: transparent;
    border-radius: 3px;
    border-width: 0;
    padding: 7px 9px;
    font-weight: bold;
    font-size: 17px;
    text-transform: uppercase;
    line-height: 2;
    position: relative;
    display: inline-block;
    margin-right: 17px;
    cursor: pointer;
    text-decoration: none;
    overflow: hidden;
    border: 2px solid #c2c4c7;
  box-shadow: 0px 3px 9px rgba(109, 104, 104, 0.31), 0px 10px 30px -15px rgba(23, 22, 22, 0)
}

.katbazolnagem:before, .katbazolnagem:after{
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 0 0 29% 29%/47%;
  background: #25b3e0; 
  left: 0;
  top: -100%;
  z-index: -1;
  transition: all .5s;
}

.katbazolnagem:before{
  background: #eee; /* button default background color */
  z-index: -2;
  top: 0;
  border-radius: 0;
}

.katbazolnagem:hover:after{
  top: 0;
  border-radius: 0;
  transition: top .5s, border-radius .5s .3s;
}



.drapecenter:after{
  border-radius: 50%;
}

/* //// Drape from Left effect //// */

.trenuksazqebun:after{
  top: 0;
  left: -100%;
  border-radius: 0 18% 18% 0/75%;
}

.trenuksazqebun:hover:after{
  left: 0;
  transition: left .5s, border-radius .1s .5s;
}

/* //// Drape from Right effect //// */

.laxnezakiped:after{
  top: 0;
  left: 100%;
  border-radius: 19% 0 0 19%/79%;
}

.laxnezakiped:hover:after{
  left: 0;
  transition: left .5s, border-radius .1s .5s;
}