How to make an element's background-color a little darker using CSS
Solution 1:
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>
Solution 2:
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.