Problem: The default button hover state was disabled when I overrode the default button properties.
I still wanted buttons to get highlighted when someone hovered over them.
Solution 1: I thought I could change the background color using the
:hover state. This, however, has a scalability problem since I would need to do this for every single button I had on my project.
Solution 2: Using a brightness() filter to generically highlight content. I found this one on CSS Tricks and it works beautifully.
Here's the code for a sample button: