Using a brightness() filter to generically highlight content

Rick Strahl:

I can’t tell you how many times over the years I’ve implemented a custom ‘button’ like CSS implementation. Over the years I’ve used images, backgrounds, gradients, and opacity to effectively ‘highlight’ a control. All that works of course, but the problem with most of these approaches is that one way or the other you’re hard coding a color value, image, or gradient.

You certainly have a lot more control if you specify exact colors, but if you can pull off brightening, darkening, or even a hue-shift in a way that feels cohesive on your site, it’s certainly a lot less code to maintain,

.button.specific-button {   background: #4CAF50; } .button.specific-button:focus, .button.specific-button:hover {   background: #A5D6A7; }  /* vs. */ .button:focus, .button:hover {   filter: brightness(120%); }  /* or maybe you're super hardcore and do it everywhere */ :focus, :hover {   filter: brightness(120%) saturate(120%); }

Direct Link to ArticlePermalink


The post Using a brightness() filter to generically highlight content appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

CSS-Tricks

Comments

comments

, , , , ,