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.

Answer 1

Here's another way, by using CSS's color-mix() function. It is supported by all major browsers: caniuse

:root {

  --col-primary    : blue;

}

body { background-color: #232324; }

button {

  --bg-color: var(--col-primary);

  color: white;
  padding: 2rem;
  background-color: var(--bg-color);
  border: 0;
  border-radius: 8px;
  transition: background-color 400ms;

}

button.darken:hover {

  --bg-color: color-mix(in hsl, var(--col-primary), black 20%);

}

button.lighten:hover {

  --bg-color: color-mix(in hsl, var(--col-primary), white 20%);

}

button.alpha:hover {

  --bg-color: color-mix(in hsl, var(--col-primary), transparent 95%);

}

<button class="darken">Darken</button>
<button class="lighten">Lighten</button>
<button class="alpha">Transparentize</button>

Answer 2

It is easier if you put background color a tint dark then add it to the hover function also add transitions to make it smooth you can either use the RGB or RGBA for the background color.

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

<style>
  .button {
    Border: none;
    Border-radius: 4px;
    Color: white;
    Cursor: pointer;
    Width: 86px;
    Height: 32x;
    Background-color: rgba(121, 82, 179);
    color:white
    transition:all 1s;
  }
  
  .button:hover {
    Background-color: rgba(114, 77, 170, 80);
  }
</style>

Answer 3

You may consider using HSL color values, which can better meet your needs. The HSL color model is more easily read and understood by humans compared to the Hex color code (#FF0033).

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: 348;
  --saturation: 100%;
  --lightness: 50%;
  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'>PayPay</div>
<div class='Button light'>PayPay</div>

Answer 4

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(rgb(0 0 0/40%) 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(#0000, rgb(0 0 0/40%)) 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(rgb(0 0 0/40%) 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>

You can also consider a big inset box-shadow and you will also have the ability to add transition:

.button {
  display: inline-block;
  color: #fff;
  padding: 10px 20px;
  font-size: 20px;
  background-color: red;
  box-shadow: 0 0 0 100vmax inset rgb(0 0 0/var(--o,0%));
  transition: .4s;
}

.button:hover {
  --o: 40%;
}

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

Answer 5

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>

Answer 6

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.