I'm trying to make a button show a slightly transparent background on hover, and it works fine if the element containing the button has a white background.
When the container element has a not-white background, the transparent background on the button ends up showing the background of the container.
I've searched around and tried making another element with a white background and the same width and height of the button, and then absolute position it. Then I give it and z-index of -1 to stay behind the text on the button.
Basically, I would like to make the hover look like in Example 2, but when it's inside the green container.
EDIT: I was able to make it work by using another container for the button, giving it a width and height of auto and a white background, as show in Example 5. However, I would like to know if there is a better solution, since mine would require to use an extra wrapper for every other button on a non-white container.
In the snippet below:
Example 1: when hovering, the color of the container ends up showing up.
Example 2: correct color on hovering.
Example 3: here I've tried using another element with a white background and positioning it behind the button. But it has the same problem as Example 1.
Example 4: here I've tried using z-index, but the hover effect doesn't show up at all.
Example 5: it works, but I'm not sure if that's the best way of doing it.
.container {
margin-top: 12px;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 80px;
background: #3FAF6C;
}
.containerWhite {
margin-top: 12px;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 80px;
border: 1px solid black;
}
.btn_test {
position: relative;
white-space: nowrap;
border: 1px solid black;
width: auto;
margin-left: 8px;
/*z-index: 10;*/
padding: 12px 16px;
border-radius: 8px;
background: #FFF;
}
.btn_test2 {
position: relative;
white-space: nowrap;
border: 1px solid black;
width: auto;
margin-left: 8px;
/*z-index: 10;*/
padding: 12px 16px;
border-radius: 8px;
background: #FFF;
}
.btn_test3 {
position: relative;
white-space: nowrap;
border: 1px solid black;
width: auto;
margin-left: 8px;
z-index: 10;
padding: 12px 16px;
border-radius: 8px;
background: #FFF;
}
.btn_test:hover {
background-color: rgba(105, 220, 172, .22);
}
.btn_test2:hover {
background-color: rgba(105, 220, 172, .22);
}
.btn_test3:hover {
background-color: rgba(105, 220, 172, .22);
z-index: 15;
}
.btn_background {
position: absolute;
background: #FFF;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
border-radius: 8px;
z-index: -1;
}
.btn_test::before {
content: " ";
display: block;
width: 100%;
height: 100%;
position: absolute;
z-index: -1;
border-radius: 8px;
left: 0px;
top: 0px;
background-color: #FFF;
}
.btn_test4 {
white-space: nowrap;
border: none;
width: auto;
padding: 12px 16px;
border-radius: 8px;
background: #FFF;
}
.btn_test4:hover {
background-color: rgba(105, 220, 172, .22);
}
.btn-white-background {
width: auto;
height: auto;
border: 1px solid black;
border-radius: 8px;
background: #FFF;
}<div class="container">
<button class="btn_test" type="button">Example 1</button>
</div>
<div class="containerWhite">
<button class="btn_test" type="button">Example 2</button>
</div>
<div class="container">
<button class="btn_test2" type="button">Example 3
<div class="btn_background"></div>
</button>
</div>
<div class="container">
<button class="btn_test3" type="button">Example 4
<div class="btn_background"></div>
</button>
</div>
<div class="container">
<div class="btn-white-background">
<button class="btn_test4" type="button">Example 5
</button>
</div>
</div>