Check out the code snippet
When hovering over the button, the "Sign Up!" label disappears. I tried adding color: rgba(32,32,32,1); to both the .button element and the ::before selector as a backup, but the label still won't display on top of the button.
I even added z-index: 9999 to the .button element, but that didn't solve the issue either.
The only noticeable change is that the
background-color: rgba(255,187,17,1);::before selector. Why isn't the color: property working?
Your insights are appreciated!
HTML
<div class="button">SIGN UP!</div>
CSS
.button {
position: relative;
color: rgba(32, 32, 32, 1);
font-size: 30px;
cursor: pointer;
text-decoration: none;
border: none;
border-radius: 8px;
font-weight: 700;
width: 250px;
height: 50px;
font-family: 'Source Sans Pro', sans-serif;
margin: auto 0;
text-align: center;
padding-top: 10px;
}
.button::before {
color: rgba(32, 32, 32, 1);
background-color: rgba(255, 187, 17, 1);
border-radius: 8px;
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
transition: all 0.3s;
}
.button:hover::before {
opacity: 0;
transform: scale(0.5, 0.5);
}
.button::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0;
border-radius: 8px;
transition: all 0.3s;
border: 1px solid #959595;
transform: scale(1.2, 1.2);
}
.button:hover::after {
opacity: 1;
transform: scale(1, 1);
}