What's the best way to make a transparent background on a button inside a container, without showing the color of the container behind it?

Question

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>

Answer 1

By your description, it seems that you actually do not want a slightly transparent background but just a light green one. (partially transparent by definition means that you can see partially through it)

So why not just use the color you want ?

In your case, it is rgb(222, 247, 237)

.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_test:hover {
  background-color: rgb(222, 247, 237);
}

<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>