I am currently creating buttons using the anchor tag. However, I am facing issues with the desired effect not working as expected. The pseudo-element is overlapping the button and the text is getting hidden. My goal is to have the pseudo-element positioned between the button and the 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 aim to have the pseudo element background adjust to the button size on hover. Additionally, I want the button text to remain visible. I believe that there might be an issue with the z-index or some other property causing the problem.