CSS转换后悬停时的CSS透明

Question

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

以下是我的CSS代码：

.btn.btn1::before {
top: 0px;
bottom: 0px;
right: 0px;
left: 0px;
width: 100%;
height: 100%;
position: absolute;
z-index: -1;
content: '';
transform: scaleX(0);
transform-origin: left;
transition: transform 600ms ease-in-out;
background: #E9E9E9;
}
.btn.btn1:hover::before,
.btn.btn1:focus::before {
transform: scaleX(1);
}
.btn.btn1:hover {
color: gray !important;
z-index: 1;
}
.btn.btn1:hover:after {
transform: translateX(0px);
}

网站：https://polished-london.myshopify.com/密码：主页

Answer 1

您只需向.btn.btn1:hover::before, .btn.btn1:focus::before选择器添加一个动画，即可在背景更改颜色后使::before伪元素的背景透明。要了解主要变化在哪里，您可以查看"；重要代码"；部分

.btn.btn1::before {
top: 0px;
bottom: 0px;
right: 0px;
left: 0px;
/*width: 100%;
height: 100%;*/
width: 200px;
height: 50px;
position: absolute;
z-index: -1;
content: '';
transform: scaleX(0);
transform-origin: left;
transition: transform 600ms ease-in-out;
background: #E9E9E9;
}
/* IMPORTANT CODE */
@keyframes make-transparent {
to {
background: transparent;
}
}
.btn.btn1:hover::before,
.btn.btn1:focus::before {
transform: scaleX(1);
/* First number is animation duration, and the second number is the animation delay. */
/* Adjust them however you'd like. */
animation: make-transparent 600ms 600ms forwards;
}
/* END IMPORTANT CODE */
.btn.btn1:hover {
color: gray !important;
background: transparent;
z-index: 1;
}
.btn.btn1:hover:after {
transform: translateX(0px);
}
/* Some of my own styles.  Not important */
body {
display: grid;
place-items: center;
min-height: 100vh;
}
.btn.btn1 {
position: relative;
border: 1px solid;
font-family: 'Segoe UI', sans-serif;
text-decoration: none;
color: black;
width: 200px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
/* End of personal styles */

<a class="btn btn1" href="#">Howdy</a>

Answer 2

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