I would like to add a darkened background color to my buttons when someone hovers over them. My problem is that the buttons have a background-color: transparent by default (when not being hovered over).
So that means the buttons have different background colors (depending on the background div's color). Therefore I cannot make 20+ css classes for every darkened color. I would like a solution that I can just add to my single icon-button class. See my examples for a better explanation.
I would like something like this:
.icon-button:hover {
background-color: black;
background-color-opacity: 25%;
}
Instead of doing this:
.icon-button.white:hover {
background-color: #xxxxxx; (darkened white)
}
.icon-button.red:hover {
background-color: #xxxxxx; (darkened red)
}
.icon-button.purple:hover {
background-color: #xxxxxx; (darkened purple)
}
.icon-button.green:hover {
background-color: #xxxxxx; (darkened green)
}
.....
(For some reason my image upload is failing, check it here) https://i.imgur.com/5HSzxqF.jpg
You could use an rgba colour for the background. rgba has an alpha channel that dictates the opacity of the colour layer. This would be the equivalent of the background-color-opacity that you mention.
div {
padding: 15px;
text-align: center;
}
div:nth-child(1) {
background: red;
}
div:nth-child(2) {
background: green;
}
div:nth-child(3) {
background: blue;
}
button {
background: transparent;
border: 1px solid white;
color: white;
padding: 15px 30px;
transition: all .2s ease;
}
button:hover {
background: rgba(0,0,0,0.3);
}<div>
<button type="button">
Button
</button>
</div>
<div>
<button type="button">
Button
</button>
</div>
<div>
<button type="button">
Button
</button>
</div>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments