CSS Hover style all your buttons/links in one line

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