Código HTML
<div id="botao">
<button>CLIQUE AQUI</button>
<div id="cometas">
<span class="cometa" style="--cometaPosicao: 20"></span>
<span class="cometa" style="--cometaPosicao: 40"></span>
<span class="cometa" style="--cometaPosicao: 58"></span>
<span class="cometa" style="--cometaPosicao: 78"></span>
<span class="cometa" style="--cometaPosicao: 84"></span>
<span class="cometa" style="--cometaPosicao: 14"></span>
<span class="cometa" style="--cometaPosicao: 32"></span>
<span class="cometa" style="--cometaPosicao: 28"></span>
<span class="cometa" style="--cometaPosicao: 64"></span>
</div>
</div>Código CSS
#botao{
width: 220px;
height: 60px;
position: relative;
& button{
width: 100%;
height: 100%;
font-size: 16px;
letter-spacing: 1px;
background-color: white;
border: none;
border-radius: 24px;
cursor: pointer;
transition: all .5s;
z-index: 100;
position: absolute;
top: 0;
color: black;
&:hover{
box-shadow: 0px 20px 32px rgba(0, 0, 0, 0.15);
background-color: transparent;
color: white;
}
}
& #cometas{
width: 220px;
height: 60px;
background: linear-gradient(130deg, #18054b, #071a83);
box-shadow:-9px -7px 10.6px 0px rgba(255, 255, 255, 0.17) inset, 5px 5px 7.8px 0px rgba(0, 0, 0, 0.22) inset ;
border-radius: 24px;
display: flex;
justify-content: space-between;
overflow: hidden;
opacity: 0;
transition: all .5s;
& .cometa{
background-color: white;
width: 6px;
height: 40px;
border-radius: 40px;
clip-path: polygon(50% 0%, 100% 100%, 0% 100%) ;
animation: cometasPassando calc(.1s * var(--cometaPosicao)) infinite linear;
}
}
}
@keyframes cometasPassando{
0%{
transform: rotate(-30deg) translateY(calc(-40% * var(--cometaPosicao)));
}100%{
transform: rotate(-30deg) translateY(calc(40% * var(--cometaPosicao)));
}
}
#botao:hover #cometas{
opacity: 1 !important
}
