Reverse Button

by Bouteille Dimitri

HTML

<br/>
<button data-text="Envoyer">
  <span>Envoyer</span>
</button>

SCSS

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

button {
  border: none;
  background: none; 
  position: relative;
  overflow: hidden;
  margin-left: 50px;
  padding: 8px 30px 8px 0;
  outline: none;
  cursor: pointer;
  &:after{
    content: attr(data-text);
    background: #222;
    position: absolute;
    color: #fff;
    top: 0;
    bottom: 0;
    display: flex; 
    align-items:center;
    left: 0;
   width: 100%;
    transition: all 0.3s ease;
    overflow: hidden;
    padding-left: 15px;
    font-size: 16px;
    font-weight: 500;
  }
  span {
    font-size: 23px;
    font-weight: 900;
    color: #222;
    opacity: 0;
    display: block;
    transform: translateX(-15px);
        transition: all 0.3s ease-in 0.06s;
  }
  &:hover {
    &:after{
      width: 0;
    }
    span{
     transform: translateX(0);
     opacity: 1;
    }
  }
}