CSS Transparent On Hover After CSS Transition - html

Question

I am trying to make the button background transparent after the CSS transition on Shopify, but can't seem to do so. Please help.
Here are my CSS codes:
.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);
}
Site: https://polished-london.myshopify.com/
Password: home

Answer 1

You could just add an animation to the .btn.btn1:hover::before, .btn.btn1:focus::before selectors that would cause the background of the ::before pseudo element to be transparent after the background changes color. To see where the main change is, you can look in the "IMPORTANT CODE" section.
.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

You should exactly specify which button you are referring to.