DEV Community

loading...

CSS Hover style all your buttons/links in one line

sajrashid
・1 min read

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

Discussion (7)

Collapse
vascanera profile image
Vasca Nera • Edited

Please fix the typo in the title. Mistyping "you're" instead of "your" puts a bad shadow on the value of the content you are sharing. Self discipline and spellchecking are very important aspects in writing. Keep on learning.

Collapse
jlixerkun profile image
Jlixerkun

I couldn't agree more

Collapse
sajrashid profile image
sajrashid Author

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 Author

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!