Есть код кнопки с анимацией фона по hover
. Не могу понять, как сделать, чтобы пузыри на фоне не перекрывали текст, z-index
не помогает.
.wrap {
background: #893565;
color: #fff;
padding: 25px 50px;
margin-top: 15%;
margin-left: 10%;
display: block;
max-width: 25vw;
text-align: center;
text-decoration: none;
font-family: Arial;
font-size: 22px;
position: relative;
transition: 2s linear;
overflow: hidden;
border-radius: 10px;
}
.bubbles {
overflow: hidden;
}
.ps {
background: rgba(200, 100, 200, 1);
position: absolute;
top: 150%;
left: 65%;
width: 60%;
height: 280%;
transition: 1s ease;
border-radius: 100%;
}
.ps2 {
background: rgba(200, 100, 200, 1);
position: absolute;
top: 150%;
left: 25%;
width: 60%;
height: 280%;
transition: 1s linear;
border-radius: 100%;
z-index: 0;
}
.ps3 {
background: rgba(200, 100, 200, 1);
position: absolute;
top: 150%;
left: -15%;
width: 60%;
height: 280%;
transition: 1s ease;
border-radius: 100%;
}
.wrap:hover .ps {
transform: translateY(-75%);
}
.wrap:hover .ps2 {
transform: translateY(-75%);
}
.wrap:hover .ps3 {
transform: translateY(-75%);
}
#a1 {
display: inline-block;
color: #fff;
text-decoration: none;
overflow: hidden;
}
#text {
z-index: 1000
}
<div class="wrap">
<a href="#" id="a1">
<div class="bubbles">
<div class="ps"></div>
<div class="ps2"></div>
<div class="ps3"></div>
</div>
<span id="text">Link text</span>
</a>
</div>
z-index
применяется только к элементам у которых есть какой-нибудьposition
.z-index 1000
у тега с индексомtext
ничего не делаетposition:relative
написать, чтобы ничего не поломалось