How to make an element's background-color a little darker using CSS

Question

I have the following CSS for a button:

.Button {
  background-color: #somehex;
}

When the user hovers over the button, I want the background-color to be a little darker. I have tried changing opacity, which didn't work, and currently am doing it this way:

.Button:hover {
  transition: 0.2s ease-in;
  background-color: #ALittleDarkerHex;
}

While this process works, it is really tedious because I have to manually look for a darker version of the color I am working with. I was wondering if there was an easier way to darken the background-color of a button using CSS.

Does this answer your question? [Is it possible to change only the alpha of a rgba background colour on hover?](https://stackoverflow.com/questions/6962432/is-it-possible-to-change-only-the-alpha-of-a-rgba-background-colour-on-hover) — Maciej Kwas, Dec 22 '20 at 12:52

score 28 · Answer 1 · edited Nov 23 '21 at 22:47

Add a dark layer on the top of it using background-image. This method keeps your text visible in the same color while changing only the background.

.button {
  display: inline-block;
  color:#fff;
  padding: 10px 20px;
  font-size: 20px;
  background-color:red;
}

.button:hover {
  background-image: linear-gradient(rgba(0, 0, 0, 0.4) 0 0);
}

<div class="button"> some text </div>
<div class="button" style="background-color:lightblue;"> some text </div>
<div class="button" style="background-color:green;"> some text </div>
<div class="button" style="background-color:grey;"> some text </div>

To have a transition:

.button {
  display: inline-block;
  color:#fff;
  padding: 10px 20px;
  font-size: 20px;
  background: linear-gradient(transparent,rgba(0, 0, 0, 0.4)) top/100% 800%;
  background-color:red;
  transition:0.5s;
}

.button:hover {
  background-position:bottom;
}

<div class="button"> some text </div>
<div class="button" style="background-color:lightblue;"> some text </div>
<div class="button" style="background-color:green;"> some text </div>
<div class="button" style="background-color:grey;"> some text </div>

Another idea with mix-blend-mode:

.button {
  display: inline-block;
  color: #fff;
  padding: 10px 20px;
  font-size: 20px;
  background-color: red;
  background-image: linear-gradient(rgba(0, 0, 0, 0.4) 0 0);
  background-blend-mode: lighten;
}

.button:hover {
  background-blend-mode: darken;
}

<div class="button"> some text </div>
<div class="button" style="background-color:lightblue;"> some text </div>
<div class="button" style="background-color:green;"> some text </div>
<div class="button" style="background-color:grey;"> some text </div>

score 4 · Answer 2 · answered Dec 14 '20 at 22:58

4

This is one way you can do it

.button {
  background-color: red;
}

.button:hover {
    filter: brightness(60%);
}

<button class="button">Button</button>

Anything above brightness(100%) will increase the brightness and anything less will make it darker.

answered Dec 14 '20 at 22:58

fdsafas

198
9

5

I like this idea but changing the brightness also dims the white text that I have inside the button. Is there a way to avoid that? – Questions123 Dec 14 '20 at 23:52
This method is super quick and effective if you just want to go with the colours you already have for the button and don't want to rejiggle everything. I don't mind that it darkens the text too. I just want to let users know that they are hovering. – bonzo46 Oct 26 '21 at 00:16
One downside of this technique is that it changes the text/font color as well. – TylerH Nov 23 '21 at 22:48

score 0 · Answer 3 · answered Dec 14 '20 at 23:06

Put pseudo element behind button content and modify its opacity on hover

const colors = ['#052F5F','#005377','#06A77D','#D5C67A','#F1A208'];
const btn = document.querySelector('.Button');
btn.addEventListener('click', (e) => {
  e.preventDefault();
  btn.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
});

.Button {
  background-color: #F1A208;
  color:#fff;
  border: 0;
  border-radius: 20px;
  padding: 10px 22px;
  cursor:pointer;
  position: relative;
}
.Button:before {
  content: '';
  position: absolute;
  z-index:0;
  border-radius: 20px;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color: rgba(0,0,0,0);
  transition: .2s ease;
}
.Button span {
  position: relative;
  z-index:1;
}
.Button:hover:before {
  background-color: rgba(0,0,0,.3);
}

<button class="Button"><span>hover me</span></button>

score 0 · Answer 4 · answered Aug 15 '21 at 12:46

Using HSL color values may meet your needs. The HSL color model is more human-readable than Hex (#FF334E).

HSL color values are specified with: hsl(hue, saturation, lightness).

div {
  width: auto;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 0.5rem 0;
  padding: 1rem 2rem;
  color: white;
}

.Button {
  --hue: 712;
  --saturation: 100%;
  --lightness: 60%;
  background-color: hsl(var(--hue), var(--saturation), var(--lightness));
}

.Button.dark:hover {
  transition: 0.2s ease-in;
  --lightness: 40%;
  /* 20% dark */
}

.Button.light:hover {
  transition: 0.2s ease-in;
  --lightness: 80%;
  /* 20% light */
}

<div class='Button dark'>some text</div>
<div class='Button light'>some text</div>

How to make an element's background-color a little darker using CSS

4 Answers4

Linked

Related