Changing the default button hover color.

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:

Comments

[🚩 Atul Prajapati 🇮🇳]

Cool :)

[adrianmurage]

Thank you!