Html 当动画不再悬停时，如何向后执行动画？

我在codepen找到了这个动画按钮，我做了一点修改，现在想把它添加到我的代码中。 但是当元素不再悬停时，我希望动画向后移动。现在它又从上到下。但我想要这个：

悬停：从上到下

悬停结束：从下到上

我认为这可以通过

：after:hover

实现。但它不起作用，我也不确定这是不是正确的方法

.btn{
边界：0；
填充：0 24px；
显示：块；
位置：相对位置；
过渡：边框底色0.2s立方贝塞尔（0.215,0.61,0.355,1）0.25s；
文本对齐：居中；
边框底部：实心3px；
高度：48px；
}
.btn:未（.btn已禁用）：之前{
内容：''；
位置：绝对位置；
左：0px；
底部：0px；
高度：0px；
宽度：100%；
z指数：0；
过渡：所有0.3立方贝塞尔（1，1，1，1）0；
}
.btn:未（.btn已禁用）：悬停：在之前{
最高：0%；
底部：自动；
身高：100%；
}
.btn跨度{
位置：相对位置；
z指数：2；
}
.btn:焦点{
大纲：0；
}
.btn:未（.btn已禁用）：悬停{
颜色：#ff0080；
边框底色：#ffffcc；
}
.btn:未（.btn已禁用）：活动{
边框底色：#0040ff；
转换延迟：0s；
过渡时间：0.15s；
}
.btn主要{
背景色：#ffffcc；
颜色：#ff0080；
}
.btn主要：之前{
背景：#fff；
}

小按钮

为了防止未覆盖时从顶部开始过渡，在未悬停时在伪元素上设置

顶部：0

和

高度：0

，悬停时将

高度更改为100%。当高度从0%移动到100%时，动画的方向将是向下的，而当高度从100%移动到0%时，动画的方向将是向上的


.btn{
边界：0；
填充：0 24px；
显示：块；
位置：相对位置；
过渡：边框底色0.2s立方贝塞尔（0.215,0.61,0.355,1）0.25s；
文本对齐：居中；
边框底部：实心3px；
高度：48px；
}
.btn:未（.btn已禁用）：之前{
内容：''；
位置：绝对位置；
排名：0；
左：0；
身高：0；
宽度：100%；
z指数：0；
过渡：所有0.3立方贝塞尔（1，1，1，1）0；
}
.btn:未（.btn已禁用）：悬停：在之前{
身高：100%；
}
.btn跨度{
位置：相对位置；
z指数：2；
}
.btn:焦点{
大纲：0；
}
.btn:未（.btn已禁用）：悬停{
颜色：#ff0080；
边框底色：#ffffcc；
}
.btn:未（.btn已禁用）：活动{
边框底色：#0040ff；
转换延迟：0s；
过渡时间：0.15s；
}
.btn主要{
背景色：#ffffcc；
颜色：#ff0080；
}
.btn主要：之前{
背景：#fff；
}
小按钮
为了防止未覆盖时从顶部开始过渡，在未悬停时在伪元素上设置
顶部：0
和
高度：0
，悬停时将
高度
更改为100%。当高度从0%移动到100%时，动画的方向将是向下的，而当高度从100%移动到0%时，动画的方向将是向上的


.btn{
边界：0；
填充：0 24px；
显示：块；
位置：相对位置；
过渡：边框底色0.2s立方贝塞尔（0.215,0.61,0.355,1）0.25s；
文本对齐：居中；
边框底部：实心3px；
高度：48px；
}
.btn:未（.btn已禁用）：之前{
内容：''；
位置：绝对位置；
排名：0；
左：0；
身高：0；
宽度：100%；
z指数：0；
过渡：所有0.3立方贝塞尔（1，1，1，1）0；
}
.btn:未（.btn已禁用）：悬停：在之前{
身高：100%；
}
.btn跨度{
位置：相对位置；
z指数：2；
}
.btn:焦点{
大纲：0；
}
.btn:未（.btn已禁用）：悬停{
颜色：#ff0080；
边框底色：#ffffcc；
}
.btn:未（.btn已禁用）：活动{
边框底色：#0040ff；
转换延迟：0s；
过渡时间：0.15s；
}
.btn主要{
背景色：#ffffcc；
颜色：#ff0080；
}
.btn主要：之前{
背景：#fff；
}
小按钮
更改
btn:before
并提供

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

更改
btn:before
并提供

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

codepen的代码是否按照您的要求工作？@Patrick Mlr不，它也不是反向的。codepen的代码是否按照您的要求工作？@Patrick Mlr不，它也不是反向的。