Wie mache ich eine Animation rückwärts, wenn sie nicht mehr schwebt?

Question

Ich habe diesen animierten Button bei codepen gefunden, ich habe mich ein wenig geändert und möchte ihn nun meinem Code hinzufügen. Aber ich möchte die Animation rückwärts gehen, wenn das Element nicht mehr schwebt. Im Moment geht es wieder von oben nach unten. Aber ich wollte diese:

Hover: Rücks.gedreht

Ende des Hover: unten nach oben

Ich dachte, dies mit :after:hover möglich ist. Aber es hat nicht funktioniert und ich bin mir nicht sicher, ob das der richtige Weg ist.

.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>

Eigentlich ist mein Code in Sass aber habe ich es hier für die Demonstration.

Answer 1

Um den Übergang von der ausgehend von der Spitze zu verhindern, wenn unhovered, eingestellt top: 0height: 0 und auf dem Pseudo-Elemente, wenn es nicht schwebte, und die height bis 100% ändern, wenn schwebt. Wenn sich die Höhe von 0 auf 100% bewegt, wäre die Richtung der Animation unten, und wenn sie von 100% auf 0 geht, wäre die Richtung hoch.

.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

Ändern der btn:before und bieten

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