CSS opacity background color and text not working

You can't give opacity only to the background without affecting the rest...
Instead, try with alpha in background-color.

Ex.

.button{
  background-color: #FF9924; // for browser that don't accept alpha in color
  background-color: rgba(255, 153, 36, 0.5);
}

You should read about rgba

This is the syntax:

 .button {
      background-color: rgba(255, 153, 36, 0.5)
 }

Here's a Hex-to-RGB Color Converter

You should use rgba() to set the background-color with desired opacity It won't change the text's opacity.

Related