Make background-color darker dynamically without making text color darker-CodePudding

I want to dynamically make the background-color of every button darker on hover, I want to add it to my globals.css so that it works dynamically regardless of the background-color of the button. I have tried using filter: brightness() but this affects color of the text too, I want to only make the background-color darker. Can this be achieved with css only? I have tried this:

button {
  transition: 300ms;
  background:#somecolor;
}

button:hover {
  filter: brightness(80%)
  color: #FFF;
}

But this will affect color of the text, which is something I do not want.

CodePudding user response：

Just use an rgb background-color and set the opacity on that background.

p {
  background-color: rgb(0, 0, 0, .5); /* .5 = opacity */
  color: white;
}

p:hover {
  background-color: rgb(0, 0, 0, .8);
}

<p>Foo</p>

Use a psuedo-element.

button:before {
  content: "";
  position: absolute;
  top: 3px;
  bottom: 2px;
  left: 0;
  right: 0;
  z-index: 1;
  background-color: rgb(0, 0, 0, .3);
  color: white;
  display: none;
}

button {
  transition: ease-in .3s;
}

button:hover:before {
  display: block;
}

div {
  position: relative;
  width: fit-content;
}

<div>
  <button>Foo</button>
</div>

CodePudding user response：

After trying different methods I came up with this solution using box-shadow.

box-shadow: -200px -200px 0px 200px rgb(0 0 0 / 10%) inset

This is an inset box-shadow and will not affect the color of the text.

Cross platform:

box-shadow: -200px -200px 0px 200px rgba(0,0,0,0.10) inset;
-webkit-box-shadow: -200px -200px 0px 200px rgba(0,0,0,0.10) inset;
-moz-box-shadow: -200px -200px 0px 200px rgba(0,0,0,0.10) inset;

CodePudding user response：

Like this, this will set all buttons to be a background color on hover

button:hover {
 background-color: black;//set and rgb color here or whatever
}

This can also be used with classes like so:

button.myButton:hover {
 background-color: black;//set and rgb color here or whatever
}

you could also edit opacity but that doesn't change color, it makes it see through so up too you there.