Keep the pseudo element in between the background and main content - html

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">
read
</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">
read
</section>