Comment faire une animation en arrière quand il ne flotte plus?

Question

J'ai trouvé ce bouton animé sur codepen, j'ai un peu changé et je veux maintenant l'ajouter à mon code. Mais je veux que l'animation revienne quand l'élément n'est plus plané. En ce moment, ça recommence de haut en bas. Mais je voulais que cela:

Hover: haut en bas

Fin de vol stationnaire: bas en haut

Je pensais que cela est possible avec :after:hover. Mais cela n'a pas fonctionné et je ne suis pas sûr que ce soit la bonne façon.

.btn { 
 
    border: 0; 
 
    padding: 0 24px; 
 
    display: block; 
 
    position: relative; 
 
    transition: border-bottom-color 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0.25s; 
 
    text-align: center; 
 
    border-bottom: solid 3px; 
 
    height: 48px; 
 
} 
 

 
.btn:not(.btn-disabled):before { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 0px; 
 
    bottom: 0px; 
 
    height: 0px; 
 
    width: 100%; 
 
    z-index: 0; 
 
    transition: all 0.3s cubic-bezier(1, 1, 1, 1) 0s; 
 
} 
 

 
.btn:not(.btn-disabled):hover:before { 
 
    top: 0%; 
 
    bottom: auto; 
 
    height: 100%; 
 
} 
 

 
.btn span { 
 
    position: relative; 
 
    z-index: 2; 
 
} 
 

 
.btn:focus { 
 
    outline: 0; 
 
} 
 

 
.btn:not(.btn-disabled):hover { 
 
    color: #ff0080; 
 
    border-bottom-color: #ffffcc; 
 
} 
 

 
.btn:not(.btn-disabled):active { 
 
    border-bottom-color: #0040ff; 
 
    transition-delay: 0s; 
 
    transition-duration: 0.15s; 
 
} 
 

 
.btn-primary { 
 
    background-color: #ffffcc; 
 
    color: #ff0080; 
 
} 
 

 
.btn-primary:before { 
 
    background: #fff; 
 
}

<button type="button" class="btn btn-primary"> 
 
    <span>Small Button</span> 
 
</button>

En fait, mon code est en Sass, mais je l'ai changé ici pour la démonstration.

Answer 1

Pour empêcher le passage de départ à partir du haut lorsque unhovered, régler top: 0 et height: 0 sur l'élément de pseudo lorsqu'ils ne sont pas plané, et changer le height à 100% lorsque plané. Lorsque la hauteur passe de 0 à 100%, la direction de l'animation serait en baisse, et quand elle passe de 100% à 0, la direction serait en hausse.

.btn { 
 
    border: 0; 
 
    padding: 0 24px; 
 
    display: block; 
 
    position: relative; 
 
    transition: border-bottom-color 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0.25s; 
 
    text-align: center; 
 
    border-bottom: solid 3px; 
 
    height: 48px; 
 
} 
 

 
.btn:not(.btn-disabled):before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    height: 0; 
 
    width: 100%; 
 
    z-index: 0; 
 
    transition: all 0.3s cubic-bezier(1, 1, 1, 1) 0s; 
 
} 
 

 
.btn:not(.btn-disabled):hover:before { 
 
    height: 100%; 
 
} 
 

 
.btn span { 
 
    position: relative; 
 
    z-index: 2; 
 
} 
 

 
.btn:focus { 
 
    outline: 0; 
 
} 
 

 
.btn:not(.btn-disabled):hover { 
 
    color: #ff0080; 
 
    border-bottom-color: #ffffcc; 
 
} 
 

 
.btn:not(.btn-disabled):active { 
 
    border-bottom-color: #0040ff; 
 
    transition-delay: 0s; 
 
    transition-duration: 0.15s; 
 
} 
 

 
.btn-primary { 
 
    background-color: #ffffcc; 
 
    color: #ff0080; 
 
} 
 

 
.btn-primary:before { 
 
    background: #fff; 
 
}

<button type="button" class="btn btn-primary"><span>Small Button</span></button>

Answer 2

Modifier la btn:before et de fournir

top: 0; 
left: 0; 
height: 0;