make the color darker on hover without change the color

Question

I want to make the color of div darker on hover
I tried decrease the brightness using filter but this affect the text too

:root{
    --Dark-cyan: hsl(158, 36%, 37%);
}

#submit{
    background: var(--Dark-cyan);
    text-align: center;
    vertical-align: middle;
    color: white;
    font-weight: 700;
    font-size: 14px;
    width: fit-content;
    height: fit-content;
    padding: 15px 60px;
    border-radius: 15px;
}

#submit:hover{
    filter: brightness(50%);
}

 <div id="submit"> Add to Cart</div>

this is the result that I want: off hover on hover

Does this answer your question? [How to darken a background using CSS?](https://stackoverflow.com/questions/23208200/how-to-darken-a-background-using-css) — Heretic Monkey, Jul 06 '22 at 14:09
@Andy I don't understand how this is related to my problem? if i used a button instead of a div this is going to solve it ? — Dr Brown, Jul 06 '22 at 14:34
Does this answer your question? [How to make an element's background-color a little darker using CSS](https://stackoverflow.com/questions/65297617/how-to-make-an-elements-background-color-a-little-darker-using-css) — Besworks, Jul 06 '22 at 15:06

Mulaga · Answer 1 · 2022-07-06T14:26:12.420

1

You can use backdrop-filter instead of filter :)
"Because it applies to everything behind the element, to see the effect you must make the element or its background at least partially transparent".

Unfortunately for firefox, this requires at this time: User must explicitly enable the feature

:root {
    --Dark-cyan: hsl(158, 36%, 37%, 0.9);
}

#submit {
    background: var(--Dark-cyan);
    text-align: center;
    vertical-align: middle;
    color: white;
    font-weight: 700;
    font-size: 14px;
    width: fit-content;
    height: fit-content;
    padding: 15px 60px;
    border-radius: 15px;
}

#submit:hover {
    backdrop-filter: brightness(50%);
}

<div id="submit"> Add to Cart</div>

edited Jul 06 '22 at 14:26

answered Jul 06 '22 at 14:11

Mulaga

103
8

1

Sorry, I have edited the answer=> "Because it applies to everything behind the element, to see the effect you must make the element or its background at least partially transparent" – Mulaga Jul 06 '22 at 14:16
1

Please add your answer to [the duplicate target question](https://stackoverflow.com/questions/23208200/how-to-darken-a-background-using-css) rather than this one. – Heretic Monkey Jul 06 '22 at 14:17

score 0 · Answer 2 · answered Jul 06 '22 at 14:13

0

You could use box-shadow: inset with a large spread-radius

it doesn't affect the text color

:root{
    --Dark-cyan: hsl(158, 36%, 37%);
}

#submit{
    background: var(--Dark-cyan);
    text-align: center;
    vertical-align: middle;
    color: white;
    font-weight: 700;
    font-size: 14px;
    width: fit-content;
    height: fit-content;
    padding: 15px 60px;
    border-radius: 15px;
}

#submit:hover{
    box-shadow: inset 0 0 0 /*spread-radius:*/ 100px #33333377;
}

 <div id="submit"> Add to Cart</div>

answered Jul 06 '22 at 14:13

Gerrnperl

200
8

Please add your answer to [the duplicate target question](https://stackoverflow.com/questions/23208200/how-to-darken-a-background-using-css) rather than this one. – Heretic Monkey Jul 06 '22 at 14:18
thank you for sharing but I try to not specify the color manually – Dr Brown Jul 06 '22 at 14:29

score 0 · Answer 3 · answered Jul 06 '22 at 14:17

0

Try this:

You can try reducing the alpha property from rgba()

Try like this:

.your-css-class:hover {
    background: rgba(0, 0, 0, 0.25);
 }

answered Jul 06 '22 at 14:17

Tayyab

105
11

1

The OP is using `hsl()` so it would be more appropriate to suggest `hsla()`, or `hsl()` with the alpha channel argument. – Heretic Monkey Jul 06 '22 at 14:19
thank you for sharing but this make it disappear not darker – Dr Brown Jul 06 '22 at 14:30
I think then box-shadow:inset; shall do the trick – Tayyab Jul 06 '22 at 14:33

score 0 · Answer 4 · answered Jul 06 '22 at 14:44

This can be done using the pseudo ::before and ::afer and some opacity on hover. Take a look at the snippet

:root { --Dark-cyan: hsl(158, 36%, 37%, 0.9) }

.btn, .btn::before, .btn::after { border-radius: 15px }

.btn {
  color: white;
  cursor: pointer;
  display: inline-block;
  font-size: 14px; font-weight: 700;
  height: fit-content; width: fit-content;
  padding: 15px 60px;
  position: relative;
}

.btn::before, .btn::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: -1
}
.btn::before { background-color: black }
.btn::after { transition: opacity 360ms 0ms ease-in-out }

.btn:hover::after { opacity: 0.6 }

#submit::after { background-color: var(--Dark-cyan) }
#remove::after { background-color: red }

<div class="btn" id="submit">Add to Cart</div>
<div class="btn" id="remove">Remove from Cart</div>

make the color darker on hover without change the color

4 Answers4