Make background-color darker dynamically without making text color darker

Issue

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.

Solution

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;

Answered By - Hef