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

CodePudding user response：

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>

CodePudding user response：

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>

CodePudding user response：

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);
 }

CodePudding user response：

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  id="submit">Add to Cart</div>
<div  id="remove">Remove from Cart</div>