Keep the pseudo element in between the background

Question

I am making buttons by using the anchor tag. I want to make an effect but it is not working as expected. pseudo-element is flowing over the button and text is also being hidden as well. But I want something like this, the pseudo-element will be in between the button and background.

section {
  padding: 80px 0;
}

section.one {
  background: #76B39D;
}

.button {
  color: white;
  margin: 10px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: capitalize;
}

.button-type-1 {
  border: 2px solid #fff;
  padding: 10px 33px;
  overflow: hidden;
  position: relative;
}

.button-type-1:after {
  position: absolute;
  content: '';
  width: 0px;
  height: 0px;
  background: #fff;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  border-radius: 50%;
  z-index: 0;
  transition: all 0.4s ease;
}

.button-type-1:hover:after {
  width: 200px;
  height: 200px;
}

.button-type-1:hover,
.button-type-1:focus {
  text-decoration: none;
}

<section class="one">
  <a href="" class="button button-type-1">read</a>
</section>

I like to do, the pseudo element background will be fit to button size on hover. And the button text will also be seen but i thing z-index is messed up somewhere or anything else.

Answer 1

z-index 1 your relative .button-type-1 and -1 the :after pseudo.
Also, make your button inline-block to prevent the :after element overflow

section {
  padding: 80px 0;
}

section.one {
  background: #76B39D;
}

.button {
  color: white;
  margin: 10px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: capitalize;
}

.button-type-1 {
  border: 2px solid #fff;
  padding: 10px 33px;
  overflow: hidden;
  position: relative;
  display: inline-block;
  z-index:1;
}

.button-type-1:after {
  position: absolute;
  content: '';
  width: 0px;
  height: 0px;
  background: #fff;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  border-radius: 50%;
  z-index: -1;
  transition: all 0.4s ease;
}

.button-type-1:hover:after {
  width: 200px;
  height: 200px;
}

.button-type-1:hover,
.button-type-1:focus {
  text-decoration: none;
  color:#000;
}

<section class="one">
  <a href="" class="button button-type-1">read</a>
</section>