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;
    }

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site est protégé par reCAPTCHA et la Politique de confidentialité, ainsi que les Conditions de service Google s’appliquent.