CODEWITHSUNDEEP
htmlcsshover
Dr Brown
Dr Brown

Reputation: 19

make the color darker on hover without change the color

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

Upvotes: 1

Views: 914

Answers (4)

Simp4Code
Simp4Code

Reputation: 1479

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>

Upvotes: 0

Mulaga
Mulaga

Reputation: 142

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>

Upvotes: 1

Tayyab
Tayyab

Reputation: 123

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

Upvotes: 0

Gerrnperl
Gerrnperl

Reputation: 330

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>

Upvotes: 0

Related Questions