Html CSS转换后悬停时CSS透明

在Shopify上的CSS转换之后，我试图使按钮背景透明，但似乎无法做到这一点。请帮忙

以下是我的CSS代码：

.btn.btn1:：之前{
顶部：0px；
底部：0px；
右：0px；
左：0px；
宽度：100%；
身高：100%；
位置：绝对位置；
z指数：-1；
内容：''；
变换：scaleX（0）；
变换原点：左；
转换：转换600毫秒的输入输出；
背景：#E9E9E9；
}
.btn.btn1:悬停：：之前，
.btn.btn1：焦点：：之前{
变换：scaleX（1）；
}
.btn.btn1：悬停{
颜色：灰色！重要；
z指数：1；
}
.btn.btn1:悬停：之后{
转换：translateX（0px）；
}

地点：

---

密码：home

您只需将动画添加到

.btn.btn1:hover:：before、.btn.btn1:focus:：before

选择器，该选择器将在背景颜色更改后使

：：before

伪元素的背景透明。要查看主要更改的位置，可以查看“重要代码”部分

.btn.btn1:：之前{
顶部：0px；
底部：0px；
右：0px；
左：0px；
/*宽度：100%；
身高：100%*/
宽度：200px；
高度：50px；
位置：绝对位置；
z指数：-1；
内容：''；
变换：scaleX（0）；
变换原点：左；
转换：转换600毫秒的输入输出；
背景：#E9E9E9；
}
/*重要代码*/
@关键帧使其透明{
到{
背景：透明；
}
}
.btn.btn1:悬停：：之前，
.btn.btn1：焦点：：之前{
变换：scaleX（1）；
/*第一个数字是动画持续时间，第二个数字是动画延迟*/
/*你想怎么调整就怎么调整*/
动画：使透明600毫秒向前600毫秒；
}
/*结束重要代码*/
.btn.btn1：悬停{
颜色：灰色！重要；
背景：透明；
z指数：1；
}
.btn.btn1:悬停：之后{
转换：translateX（0px）；
}
/*一些我自己的风格。不重要*/
身体{
显示：网格；
放置项目：中心；
最小高度：100vh；
}
.btn.btn1{
位置：相对位置；
边框：1px实心；
字体系列：“Segoe UI”，无衬线；
文字装饰：无；
颜色：黑色；
宽度：200px；
高度：50px；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
/*个人风格结束*/

---

您应该准确指定所指的按钮。

欢迎使用stackoverflow！请在a中添加更多详细信息，如html和css，最好在a中添加。你能说得更具体些吗？过渡后的状态是什么？悬停点击？链接到你的站点（特别是密码后面的页面）并不是一个很好的方式来显示问题，一旦你解决了问题，这个问题对未来的读者来说将变得毫无用处。如上所述，请确保重现问题所需的一切都在问题本身中。这很有效！在取消覆盖后，如何使动画从右向左转换？我不知道你的意思。它似乎已经这样做了，除非我误解了你。我的意思是，现在的过渡效果是从左到右，我想在取消覆盖后成为另一个从右到左的过渡效果，就像过渡效果在这个网站按钮上反弹一样：。确实如此。唯一的区别是这里的按钮速度较慢，中间有透明的动画，实际上它消失了。在我的shopify站点：pass:home中查看