Home
Imagem-Perfil-Circulo com Efeitos

Botão com Efeito Cometas

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
}

TESTE POPUP

Recupere seu investimento

Depois de passar pelas aulas principais, você estará pronto para conquistar clientes e começar a oferecer serviços. Acredite ou não, com apenas um site, que pode ser criado em cerca de 2 a 3 dias, você já terá a chance de recuperar o investimento feito no curso!