DEV Community

Cover image for Changing the default button hover color.
adrianmurage
adrianmurage

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:

Top comments (2)

Collapse
 
atulcodex profile image
🚩 Atul Prajapati 🇮🇳

Cool :)

Collapse
 
adrianmurage profile image
adrianmurage

Thank you!