CSS Hover style all your buttons/links in one line

#css #html #webdev

Let's add a few buttons

  <button class="primary">OK</button>
  <button class="secondary">Cancel</button>
  <button  class="accent">Delete</button>

Add some styles

.primary{
 background:steelblue; 
}

.secondary..
.accent..

.primary:hover{
   background:blue;
}

Nice, but how about this ?

a:hover, button:hover{
  opacity:0.8;
}

Great now we only need a single css class for all our buttons and our links, but, but but... opacity dims the element, so how do we make it brighter without dimming either the base or the hover?

🥁 🥁 🥁 Enter the brightness filter

a:hover, button:hover {
  filter: brightness(1.75);
}

🆒 CSS filters Cool, but often overlooked.

EDIT: As suggested in the comments it's not cool to do this everywhere & it's certainly not meant to be a direction to do so... read the comments below for more

Top comments (7)

James Thomson • Jul 23 '21

Maybe I'm missing something... but, why is creating more convoluted styles make this better?

I would also say that blanket styling a and button elements rarely ends up being a good approach. Usually you spend more time overwriting those base styles when you need variants.

sajrashid • Jul 23 '21

So the emphasis is on highlighting one of the many options available, and there being so many sometimes we need a reminder. I agree blanket approach is going to hurt you down the line, but a div with 10 menu links, IMHO I'd have thought most people here would know that, but then again there's no harm in making it obvious, appreciate the pointer.

Comment deleted

Jlixerkun • Jul 23 '21

I couldn't agree more

sajrashid • Jul 23 '21

thanks

Adam Crockett 🌀 • Jul 23 '21

Filters are used all over the place my Friend, however the point that drives why you don't see this every where is usually accessibility or browser support. Filter being until recently not supported everywhere. But IE is at EOL now so maybe in 5 years you will see even more of it.

I would probably not use filter on buttons and links due to accessibility concerns