How to do an animation backwards when its not hovering anymore? - html

Question

I found this animated button at codepen, I changed a little bit and now want to add it to my code.
But I want the animation go backwards when the element is not hovered anymore. At the moment it goes again from top to bottom. But I wanted this:
Hover: Top to Bottom
End of Hover: Bottom to Top
I thought this is possible with :after:hover. But it doesn't worked and I'm not pretty sure if this is the correct way.
.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>
Actually my Code is in Sass but I changed it here for the demonstration.

Answer 1

To prevent the transition from starting from the top when unhovered, set top: 0 and height: 0 on the pseudo element when not hovered, and change the height to 100% when hovered. When the height moves from 0 to 100% the direction of the animation would be down, and when it goes from 100% to 0, the direction would be up.
.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

Change the btn:before and provide
top: 0;
left: 0;
height: 0;