0

Fiddle

When the button hovers the label "Sign Up!" disappears. I put color: rgba(32,32,32,1); to the selected element .button and to the ::before selector (in case if the .button didn't work) to display the label on top of the button.

On the selected element .button I even put z-index: 9999 and that didn't help either.

The only thing I notice the background-color: rgba(255,187,17,1); of the button works inside the ::before. Why is the color: not working?

Thanks for your wisdom!

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);
}
Christian Luneborg
  • 493
  • 7
  • 19

1 Answers1

0

Your .button::before doesn't have any content. So the color is applied to the empty string. If you type in something in there that is going to be colored (https://jsfiddle.net/Lwj24gbp/3/)

.button::before {
    color: rgba(32, 32, 32, 1);
    content: ''; // Try adding some content here. It's going to be the rgba(32, 32, 32, 1) color
}
adiyathemighty
  • 1