.container
  button.btn
    span.btn-text Hover Me
  button.btn.rounded
    span.text-green Hover Me

body,html{
  height: 100%;
}

body {
  font-family: "Lato", sans-serif;
  color: #111;
  display: flex;
  flex-direction: row;
  align-items: center;
  align-content: center;
  justify-content: center;
  background-color: #ECECEC;
}

.container {
  width: auto;
  display: flex;
  flex-direction: column;
  //border: 2px solid black;
}

.btn{
  margin: 20px auto;
  border: none;
  padding: 10px 44px;
  font-size: 36px;
  position: relative;
  &::before{
    transition: all 0.85s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    content: '';
    width: 50%;
    height: 100%;
    background: black;
    position: absolute;
    top: 0;
    left: 0;
  }

  & .btn-text{
    color: white;
    // check out mdn docs for different types of blend modes. 
    mix-blend-mode: difference;
  }
  &:hover{
    &::before{
      background: black;
      width: 100%;
    }
  }
  //rounded btn styles
  &.rounded{
    border-radius:50px;
    & .text-green{
      color:#00F0B5;
      mix-blend-mode: difference;
    }
    
    &::before{
      border-radius: 50px;
      width: 25%;
      background: #00F0B5;
    }
    &:hover{
      &::before{
      background: #00F0B5;
        width: 100%;
      }
    } 
  }
}