Check out the code snippet below. I'm attempting to adjust the button hover color to transparent. The div class is "button_container" while the button class is "btn". I made changes to the color initially, but it doesn't seem to be working. Any assistance would be greatly appreciated. Thank you in advance.
While I understand this is mostly code, I'm struggling to resolve it on my own. I have faith that the knowledgeable community here on Stack Overflow can provide some guidance. Cheers!
.button_container {
position: absolute;
left: 0;
right: 0;
top: 30%;
}
.description,
.link {
font-family: 'Amatic SC', cursive;
text-align: center;
}
.description {
font-size: 35px;
}
.btn {
line-height: 1;
border-radius: 5px;
align-items: center;
align-content: space-around;
z-index: 2;
height: 48px;
width: 200px;
border: none;
display: flex;
text-align: -webkit-left;
cursor: pointer;
text-transform: uppercase;
outline: none;
overflow: hidden;
position: relative;
color: #ffffff;
font-weight: 600;
font-size: 0.95rem;
background-image: linear-gradient(90deg, #70AECD 0%, #022350 100%);
padding: 1rem 1rem 1rem 3.99rem;
margin: -10px auto;
box-shadow: 0 5px 15px rgb(0 0 0 / 20%);
flex-direction: row;
flex-wrap: wrap;
align-content: center;
}
.btn span {
position: relative;
z-index: 1;
}
.btn:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 2.25rem;
height: 100%;
border-right: 1px solid #000000;
padding: 119px;
}
.btn:before {
content: url(https://.com/wp-content/uploads/2021/06/.png);
position: absolute;
top: 0%;
left: -11.25rem;
width: 0rem;
height: 73%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.btn:after {
content: '';
position: absolute;
left: 0;
top: 0;
height: 858%;
width: 347%;
background: #ffae25;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
-webkit-transform: translateX(-98%) translateY(-25%) rotate(37deg);
transform: translateX(-98%) translateY(-25%) rotate(47deg);
}
.btn:hover:after {
-webkit-transform: translateX(-9%) translateY(-25%) rotate(47deg);
transform: translateX(-9%) translateY(-25%) rotate(45deg);
}
.link {
font-size: 20px;
margin-top: 30px;
}
.link a {
color: #000;
font-size: 25px;
}