I'm currently working on a material button featuring a captivating ripple effect. The animation for the ripple, known as .circle, appears to be animating on top of its parent element (button) rather than underneath it, causing the text to be obscured. I've double-checked the syntax for using z-index and everything seems correct. Feel free to check out the codepen link for reference: http://codepen.io/theMugician/pen/Bjadpj
button{
z-index: 2;
border: 3px solid #222;
background: transparent;
overflow: hidden;
width: 100%;
outline: none;
position: relative;
span{
z-index: 2;
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
font-weight: 700;
font-size: 1.5em;
color: #222;
position: relative;
display: block;
user-select: none;
position: relative;
overflow: hidden;
padding: 20px;
&:hover{cursor: pointer;}
}
}
.circle{
z-index: 1;
display: block;
position: absolute;
background: #5677fc;
border-radius: 50%;
transform: scale(0);
&.animate{
z-index: 1;
animation: effect 0.65s linear;}
}
@keyframes effect{
100%{
z-index: 1;
opacity: 1;
transform: scale(2.5);
}
}