Dynamically change color to lighter or darker by percentage CSS

You can do this with CSS filters in all modern browsers (see the caniuse compatibility table).

.button {
  color: #ff0000;
}

/* note: 100% is baseline so 85% is slightly darker, 
   20% would be significantly darker */
.button:hover {
  filter: brightness(85%);
}

<button class="button">Foo lorem ipsum</button>

Here’s more reading from CSS Tricks about the various filters you can use: https://css-tricks.com/almanac/properties/f/filter/