DEV Community

Cover image for Changing the default button hover color.

Posted on

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:

Discussion (2)

atulcodex profile image
Atul Prajapati

Cool :)

adrianmurage profile image
adrianmurage Author

Thank you!