/* CSS */
.button-parent {
        position: relative;
        height: 100%;
}

.center {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.button-link {
  position: relative;
  overflow: hidden;
  border: 1px solid #000000;
  color: #ffffff;
  display: inline-block;
  font-size: 87%;
  line-height: 87%;
  padding: 18px 18px 18px;
  text-decoration: none;
  cursor: pointer;
  background: #000000; /*#fff*/
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button-link span:first-child {
  position: relative;
  transition: color 600ms cubic-bezier(0.48, 0, 0.12, 1);
  z-index: 10;
}

.button-link span:last-child {
  color: black;
  display: inline-block; /*block*/
  position: absolute;
  bottom: 0;
  transition: all 500ms cubic-bezier(0.48, 0, 0.12, 1);
  z-index: 100;
  opacity: 0;
  top: 50%;
  left: 50%;
  transform: translateY(225%) translateX(-50%);
  height: 5%; /*14px*/
  line-height: 100%; /*13px*/
  padding: 18px 18px 18px;
}

.button-link:after {
  content: "";
  position: absolute;
  bottom: -50%;
  left: 0;
  width: 100%;
  height: 100%;
  border: 1px solid #000000;
  background-color: white; /*black*/
  padding: 18px 18px 18px;
  transform-origin: bottom center;
  transition: transform 600ms cubic-bezier(0.48, 0, 0.12, 1);
  transform: skewY(9.3deg) scaleY(0);
  z-index: 50;
}

.button-link:hover:after {
  transform-origin: bottom center;
  transform: skewY(9.3deg) scaleY(2);
}

.button-link:hover span:last-child {
  transform: translateX(-50%) translateY(-100%);
  opacity: 1;
  transition: all 900ms cubic-bezier(0.48, 0, 0.12, 1);
}


@media only screen and (min-width: 800px) {
  /* For desktop: */
       .button-link {
          position: relative;
          overflow: hidden;
          border: 1px solid #000000;
          color: #ffffff;
          display: inline-block;
          font-size: 20px;
          line-height: 20px;
          padding: 18px 18px 18px;
          text-decoration: none;
          cursor: pointer;
          background: #000000; /*#fff*/
          user-select: none;
          -webkit-user-select: none;
          touch-action: manipulation;
        }
}