There is 2 spans in a button. One of them for button text and another one for ripple effect when button is hover, but when I hover button ripple span is in front of button text span while I use z-index for both of them.
.login {
position: relative;
border: rgb(0, 175, 175) 1px solid;
background-color: white;
border-radius: 20px;
height: 30px;
color: rgb(0, 175, 175);
overflow: hidden;
align-items: center;
}
.ripple {
position: absolute;
border-radius: 50%;
transform: scale(1);
background-color: rgb(0, 175, 175);
z-index: 0;
width: 29px;
height: 29px;
left: -30px;
top: 0;
bottom: 0;
transition: transform ease 1s;
}
.login:hover .ripple {
position: absolute;
border-radius: 50%;
transform: scale(20);
background-color: rgb(0, 175, 175);
width: 20px;
height: 20px;
transition: transform ease 1s;
z-index: 0;
}
.login:hover{
color: white;
} <button class="login">
<span style="z-index: 10;"> my button </span>
<div class="ripple"></div>
</button>>Solution :
.login {
position: relative;
border: rgb(0, 175, 175) 1px solid;
background-color: white;
border-radius: 20px;
height: 30px;
color: rgb(0, 175, 175);
overflow: hidden;
align-items: center;
color:#fff;
}
.ripple {
position: absolute;
border-radius: 50%;
transform: scale(1);
background-color: rgb(0, 175, 175);
z-index: 0;
width: 29px;
height: 29px;
left: -30px;
top: 0;
bottom: 0;
transition: transform ease 1s;
}
.login:hover .ripple {
position: absolute;
border-radius: 50%;
transform: scale(20);
background-color: rgb(0, 175, 175);
width: 20px;
height: 20px;
transition: transform ease 1s;
z-index: 0;
}<button class="login">
<span style="z-index: 10; position: relative;"> my button </span>
<div class="ripple"></div>
</button>