Bouton html css : translation verticale au hover

Voici un petit code css (scss dans le cas présent) qui permet de réaliser un bouton avec translation verticale du texte du bouton au hover.

Voici le code html :

<a href="URL_DU_LIEN" class="btn-flip" data-back="Texte du bouton" data-front="Texte du bouton"></a>

Voici le code scss :

  .btn-flip{
    opacity: 1;
    outline: 0;
    color: #ffffff;
    line-height: 50px;
    position: relative;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 600;
    display: inline-block;
    text-decoration: none;
    text-transform: uppercase;
    overflow: hidden;
    box-shadow: 0px 0px 5px #FEC1B5;
    border-radius: 5px;
    
    
    &:hover{
      
      &:after{
        opacity: 1;
        transform: translateY(0) rotateX(0);
      }
      
      &:before{
        opacity: 1;
        transform: translateY(-100%) rotateX(0);
      }
    }
    
    &:after{
      top: 0;
      left: 0;
      opacity: 1;
      width: 100%;
      color: red;
      display: block;
      transition: 0.5s;
      position: absolute;
      background: #ffffff;
      content: attr(data-back);
      transform: translateY(100%) rotateX(0);
      border-radius: 5px;
      box-shadow: 0px 0px 5px #FEC1B5;
    }
    
    &:before{
      top: 0;
      left: 0;
      opacity: 1;
      color: #ffffff;
      display: block;
      padding: 0 16px;
      line-height: 50px;
      transition: 0.5s;
      position: relative;
      background: red;
      content: attr(data-front);
      transform: translateY(0) rotateX(0);
      border-radius: 5px;
      box-shadow: 0px 0px 5px #FEC1B5;
    }
  }

Voici le code css classique :

.btn-flip{
    opacity: 1;
    outline: 0;
    color: #ffffff;
    line-height: 50px;
    position: relative;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 600;
    display: inline-block;
    text-decoration: none;
    text-transform: uppercase;
    overflow: hidden;
    box-shadow: 0px 0px 5px #FEC1B5;
    border-radius: 5px;
}
    
    
.btn-flip:hover{
      
      &:after{
        opacity: 1;
        transform: translateY(0) rotateX(0);
      }
      
      &:before{
        opacity: 1;
        transform: translateY(-100%) rotateX(0);
      }
    }
    
.btn-flip:after{
      top: 0;
      left: 0;
      opacity: 1;
      width: 100%;
      color: red;
      display: block;
      transition: 0.5s;
      position: absolute;
      background: #ffffff;
      content: attr(data-back);
      transform: translateY(100%) rotateX(0);
      border-radius: 5px;
      box-shadow: 0px 0px 5px #FEC1B5;
    }
    
.btn-flip:before{
      top: 0;
      left: 0;
      opacity: 1;
      color: #ffffff;
      display: block;
      padding: 0 16px;
      line-height: 50px;
      transition: 0.5s;
      position: relative;
      background: red;
      content: attr(data-front);
      transform: translateY(0) rotateX(0);
      border-radius: 5px;
      box-shadow: 0px 0px 5px #FEC1B5;
    }