<button class="button-main slide">Slide Left</button>
.button-main{
color: black;
outline: none;
background: transparent;
border: none;
letter-spacing: 0.0625em;
padding: 8px 10px;
text-transform: uppercase;
font: bold 16px 'Bitter', sans- serif;
line-height: 2;
position: relative;
display: inline-block;
margin-right: 20px;
margin-bottom: 20px;
cursor: pointer;
text-decoration: none;
overflow: hidden;
transition: all .5s;
}
.button-main :before,
.button-main :after {
content: '';
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
height: 100%;
background: #259f6c;
z-index: -1;
transform: translate3D(0,-100%,0);
transition: all .5s;
}
.button-main :before {
background: #fafcd6;
z-index: -2;
transform: translate3D(0,0,0);
}
.button-main :hover {
color: white;
}
.button-main :hover: after {
transform: translate3D(0,0,0);
transition: all .5s;
}
.slide :after {
top: 0;
z-index: -1;
transform: translate3D(-101%,0,0);
}
.slide :hover :after {
transform: translate3D(0,0,0);
transition: all .5s;
}
The hover animation effect on the button is not functioning correctly when the background color of the button is altered to a solid color. By default, the button has a transparent background in the button-main class. What modifications are required to enable the slide hover effect when changing the button background to a different color like red?