* {
    text-align: center;
    font-family: 'Hind Guntur', sans-serif;
    /*background: rgb(255, 0, 234); */
}


pre {
    text-align: left;
}

button {
    font-family: 'Hind Guntur', sans-serif;
    font-size: 14px;
    line-height: 10px;
    color: rgb(0, 0, 0);
    letter-spacing: 0.025em;
  
    background: #70707000;
    padding: 60px 0 13px;
    
    cursor: pointer;
    border: 0;
    border-radius: 1px;
    min-width: 120px;
    overflow: hidden;
  
    position: absolute;
    transform: translate(-50%, -50%);
  }
  
  button span {
      
    display: block;
    position: relative;
    z-index: 10;
  }
  
  button:after,
  button:before {
    padding: 20px 0 9px;
    content: '';
    position: absolute;
    top: 40px;
    left: calc(-100% - 30px);
    height: calc(100% - 29px);
    width: calc(100% + 20px);
    color: #fff;
    border-radius: 2px;
    transform: skew(-25deg);
    padding-top: 50px;
  }
  
  button:after {
    background: #fff;
    transition: left 0.8s cubic-bezier(0.86, 0, 0.07, 1) 0.2s;
    z-index: 0;
    opacity: 0.8;
  }
  
  button:before {
    background: #13c276;
    z-index: 5;
    transition: left 1s cubic-bezier(0.86, 0, 0.07, 1);
  }
  
  button:hover:after {
    left: calc(0% - 10px);
    transition: left 0.8s cubic-bezier(0.86, 0, 0.07, 1);
  }
  
  button:hover:before {
    left: calc(0% - 10px);
    transition: left 1s cubic-bezier(0.86, 0, 0.07, 1);
  }