DEV Community

sajrashid
sajrashid

Posted on

CSS Hover style all your buttons/links in one line

#webdev #html #css

Let's add a few buttons

  <button class="primary">OK</button>
  <button class="secondary">Cancel</button>
  <button  class="accent">Delete</button>
Enter fullscreen mode Exit fullscreen mode

Add some styles

.primary{
 background:steelblue; 
}

.secondary..
.accent..

.primary:hover{
   background:blue;
}
Enter fullscreen mode Exit fullscreen mode

Nice, but how about this ?

a:hover, button:hover{
  opacity:0.8;
}
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

🆒 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)

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
jlixerkun profile image
Jlixerkun •

I couldn't agree more

Collapse
 
sajrashid profile image
sajrashid •

thanks

Collapse
 
jamesthomson profile image
James Thomson •

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.

Collapse
 
sajrashid profile image
sajrashid •

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.

Collapse
 
adam_cyclones profile image
Adam Crockett 🌀 •

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

Collapse
 
cuellar22 profile image
RAUL CUELLAR MORENO •

Great!