css button text and button background different opacity

css, html

Solution

`opacity` is inherited by children and can't be reversed, so use `rgba` on the parent as well. E.g.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

#xxx {
  outline:white solid 0.5px;
  padding: 6px 8px;
  border-radius: 3px;
  color:rgba(0,0,0,0.4);
  font-weight: bold;
  border: none;
  margin: 0;
  background: rgba(0,0,0,0.2);
  font-family: helvetica, arial, sans-serif;
  font-size: 19pt;
}

#xxx:hover {
   background: rgba(0,0,0,0.4); 
   color:rgba(0,0,0,0.8);
}
</style>
</head>
<body>

<button id="xxx">This is a test</button>

</body>
</html>

Problem

hopefully you can help with a simple question about CSS. I'm trying to make a button (doesn't need to be html class button) with a transparent background and an outline with text that does not have the same opacity as the button. That is, the text should remain at a different opacity than the button. Is this possible? My attempt at a fiddle to solve this here - http://jsfiddle.net/9jXYt/ CSS: ``` #xxx { outline:white solid 0.5px; /*opacity: 0.2; */ background-color: rgba(255,0,0,0.2); padding: 6px 8px; border-radius: 3px; color: black; font-weight: bold; border: none; margin: 0; /*box-shadow: 0px 2px 3px #444;*/ } #xxx:hover { opacity: 0.9; } #fff { font-family: helvetica, arial, sans-serif; font-size: 19pt; opacity: 1 !important; color: rgba(0,0,0,0.5) !important; } ``` HTML: `<button id="xxx"><div id="fff">This is a test</div></button>` Thanks in advance for any hints.

Original source