CSS Darken on Hover without Changing Text Color

Question

I'm looking to darken an element on hover without also darkening the text color. I would like the text to remain pure white on hover.

Example:

<a href="#" class="badge" style="background-color: #0072CE;"><span>Some Text</span></a>

CSS:

.badge {
  display: inline-block;
  padding: 0.35em 0.65em;
  font-size: 0.75em;
  font-weight: 700;
  line-height: 1;
  color: white;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25rem;
  text-decoration: none;
}
.badge:hover {filter: brightness(0.8);}
.badge > span {color: white;}

I tried applying positioning and z-index but that didn't work either. Also, I need the style tag because the background colors are generated dynamically.

Any help on the above or a different solution altogether would be appreciated!

EDIT: My appologies, I should have been clear that I also don't have access to set the hover color in the styles.

This actually seems like a specificity issue between your inline styles and your style tag — Zach Jensz, Apr 01 '22 at 02:40
backdrop-filter doesn't work on Firefox and was hoping to find a complete solution — Dario Zadro, Apr 01 '22 at 03:05

score 1 · Accepted Answer · answered Apr 01 '22 at 03:32

1

Instead of using filter: Brightness(), I prefer to use filter: Saturate(). It gives object darken background but doesn't affect your text.

.badge {
  display: inline-block;
  padding: 0.35em 0.65em;
  font-size: 0.75em;
  font-weight: 700;
  line-height: 1;
  color: white;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25rem;
  text-decoration: none;
}
/* .badge:hover {filter: brightness(0.8);} */
.badge:hover {filter: saturate(0.5);}
.badge > span {color: white;}

<a href="#" class="badge" style="background-color: #0072CE;"><span>Some Text</span></a>

answered Apr 01 '22 at 03:32

Binh Vo

74
4

Interesting solution ngl – Zach Jensz Apr 01 '22 at 03:35
Perfect! This works great, and I can remove the span tags too. Thank you! – Dario Zadro Apr 01 '22 at 03:36
1

Keep in mind that just works with white or black text color. – Binh Vo Apr 01 '22 at 03:40

Zach Jensz · Answer 2 · 2022-04-01T03:34:20.467

This is the best solution I can think of right now when you're unable to change the inline styling.

Essentially styling the span instead, changing it's background opacity based on hover.

.badge {
  display: inline-block;
  font-size: 0.75em;
  font-weight: 700;
  line-height: 1;
  color: white;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25rem;
  text-decoration: none;
}

.badge>span {
  display: block;
  padding: .35em .65em;
  border-radius: inherit;
}

.badge>span:hover {
  background-color: #0004;
}

<a href="#" class="badge" style="background-color: #0072CE;"><span>Some Text</span></a>

I don't have access to set the hover color in the stylesheet. Otherwise, I wouldn't be using inline styles at all. — Dario Zadro, Apr 01 '22 at 03:31

score 0 · Answer 3 · answered Apr 01 '22 at 03:40

you can use background-color attribute to change the background color

.badge {
  display: inline-block;
  padding: 0.35em 0.65em;
  font-size: 0.75em;
  font-weight: 700;
  line-height: 1;
  color: white;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25rem;
  text-decoration: none;
  background-color: rgba(111,111,111,1);
}
.badge:hover {background-color: rgba(111,111,111,.5);}

you can make background color transparent with value of alpha in rgba(r, g, b, alpha)

or

you can just change background color

This won't work because the inline style has higher specificity and will always override the style tag styling. — Zach Jensz, Apr 01 '22 at 03:43

CSS Darken on Hover without Changing Text Color

3 Answers3