Shafizadeh Shafizadeh - 2 months ago 10
CSS Question

How can I make the color of an element more dark on :hover?

I have multiple elements in my webpage. For example multiple buttons (which have red background color), links (which have blue background color) and etc ... .

I need to change the color of them on

:hover
. Currently I do that like this:



button{
background-color: red;
}

button:hover {
background-color: #c80020;
}

a {
color: blue;
}

a:hover {
color: #082767;
cursor: pointer;
}

<button>button</button>
<a>link</a>





As you see, I use a more dark color than element's color on
:hover
.

All I want to know, Isn't there any color (or approach) to just makes an element more dark than what it is? I don't have any specific color. actually I don't care about any exact color, I just want to make an element more dark on
:hover
, just that. Any suggestion?

Answer

You could use hsla instead of hex-colors.

example:

button{
 background-color: hsla(356, 98%, 46%, 1);
}

button:hover {
  background-color: hsla(356, 98%, 26%, 1);
}
<button>button</button>