Home/ Questions/Q 9198689
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T22:20:44+00:00

I have a class called button, I simply use it for all hover elements.

  • 0

I have a class called “button”, I simply use it for all hover elements. Most of my buttons are black (background-color), and the .button:hover changes the background-color value of the items to gray.

However, some of my buttons have random colors so they lose the effect when their background-color changes to light gray. for this reason, I would like to change the “satauration” value of the hovered item instead of modifying the whole color. That way, the hover effect will base on the base color..

I was thinking… if it is possible to change the “saturation” value (only) of the background-color so that my hover effect will still be useful for random colors.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Using filter currently seems to only work for webkit-based browsers..

    -webkit-filter: saturate(3);
filter: saturate(3);

    Demo | Source

    Coupling the saturation filter with brightness seems to have the most effect, with the black being visibly affected

    -webkit-filter: brightness(0.2) saturate(3);
filter: brightness(0.2) saturate(3);

    Demo | Source

    Additional demo: http://html5-demos.appspot.com/static/css/filters/index.html

    • 0