css button text and button background different opacity

I think the secret to what you're trying to do is to use transparent colors rather than opacity.

#xxx {
  outline:white solid 0.5px;
  padding: 6px 8px;
  border-radius: 3px;
  background-color: rgba(0,0,0, .25);
  color: black;
  font-weight: bold;
  border: none;
  margin: 0;
}

#xxx:hover {
   background-color: rgba(0,0,0,.30);
}

#fff {
    font-family: helvetica, arial, sans-serif;
    font-size: 19pt;
    color: rgba(0,0,0,.25);
}
#fff:hover {   
   color: rgba(0,0,0,.6);
}

I've adapted your fiddle: http://jsfiddle.net/harveyramer/8pymY/


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>

Tags:

Html

Css

Recent Posts