.astro-pearl-btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:14px;
padding:18px 34px;
border-radius:60px;
text-decoration:none;
overflow:hidden;
position:relative;
background:linear-gradient(
135deg,
#f7feff 0%,
#d9f7ff 18%,
#bdeeff 40%,
#8ee6ff 55%,
#c8f7ff 75%,
#f7feff 100%
);
background-size:300% 300%;
animation:pearlGradient 8s ease infinite;
box-shadow:
0 8px 25px rgba(90,210,255,.35),
0 0 30px rgba(145,230,255,.45),
inset 0 1px 2px rgba(255,255,255,.9);
transition:all .35s ease;
}
/* Перламутровый блик */
.astro-pearl-btn:before{
content:'';
position:absolute;
top:-180%;
left:-60%;
width:40%;
height:450%;
background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.9),
transparent
);
transform:rotate(25deg);
animation:shineMove 4s linear infinite;
}
.btn-text{
position:relative;
z-index:2;
color:#ffffff;
font-size:16px;
font-weight:800;
letter-spacing:1.2px;
text-transform:uppercase;
text-shadow:
0 1px 2px rgba(0,0,0,.15),
0 0 10px rgba(255,255,255,.4);
}
/* Светящаяся стрелка */
.btn-arrow{
position:relative;
z-index:2;
color:#000000;
font-size:24px;
font-weight:700;
animation:arrowGlow 2s ease-in-out infinite;
}
.astro-pearl-btn:hover{
transform:translateY(-3px);
box-shadow:
0 12px 35px rgba(90,210,255,.45),
0 0 45px rgba(145,230,255,.7),
0 0 70px rgba(145,230,255,.35);
}
.astro-pearl-btn:hover .btn-arrow{
transform:translateX(4px);
}
@keyframes pearlGradient{
0%{background-position:0% 50%;}
50%{background-position:100% 50%;}
100%{background-position:0% 50%;}
}
@keyframes shineMove{
0%{left:-60%;}
100%{left:160%;}
}
@keyframes arrowGlow{
0%,100%{
text-shadow:
0 0 5px rgba(255,255,255,.9),
0 0 12px rgba(120,220,255,.8),
0 0 20px rgba(120,220,255,.7);
}
50%{
text-shadow:
0 0 8px rgba(255,255,255,1),
0 0 18px rgba(120,220,255,1),
0 0 35px rgba(120,220,255,.9);
}
}