.elementor-37269 .elementor-element.elementor-element-15cd9ad{--display:flex;--min-height:703px;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-37269 .elementor-element.elementor-element-a618481 .elementor-button{background-color:#61CE7000;font-family:"Sora", Sans-serif;font-size:18px;font-weight:600;letter-spacing:1px;}.elementor-37269 .elementor-element.elementor-element-cc481b0 .elementor-button{background-color:#61CE7000;font-family:"Sora", Sans-serif;font-size:18px;font-weight:600;letter-spacing:1px;}/* Start custom CSS for button, class: .elementor-element-a618481 *//* IMPORTANTE!!!

Este .elementor-37269 .elementor-element.elementor-element-a618481 abaixo é oque deixa o texto do botão visivel ao aplicar a máscara da animação. Sem este código o texto do botão fica por trás da mascara e não ficará visivel"*/
.elementor-37269 .elementor-element.elementor-element-a618481 .elementor-button-text{
    z-index: 2;
}
/*Configurações de cores do botão:
    altere os códigos de cor para as cores desejadas, caso queira apenas uma cor FIXA, mude o "background: linear-gradient(90deg,#673ab7 -20%, #f48fb1 120%) para:
        
        background-color: red; (<- ou sua cor desejada.)"

*/
.elementor-37269 .elementor-element.elementor-element-a618481:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,#673ab7 -20%, #f48fb1 120%);
    
/*IMPORTANTE!!!
        Aqui é a declaração da animação do hover, onde é 100% necessario que a imagem esteja upada no diretorio deste projeto, como o seguinte link que foi utilizado. (o link da imagem estára disponivel junto ao NOTION deste botão.
        
        Com a imagem upada aqui, copie o link do diretorio e cole abaixo.
*/
    
    -webkit-mask: url("http://proj.agenciasandri.com/wp-content/uploads/2023/04/nature-sprite.png");
    mask: url("http://proj.agenciasandri.com/wp-content/uploads/2023/04/nature-sprite.png");
    -webkit-mask-size: 2300% 100%;
    mask-size: 2300% 100%;
    border-radius: 4px;
    transition: 0.5s;
    z-index: 1;
    animation: mask 0.7s steps(22) forwards;
     
    
}

.elementor-37269 .elementor-element.elementor-element-a618481:hover:before{
    animation: mask2 0.7s steps(22) forwards;
    
}

@keyframes mask{
    0%{
        -webkit-mask-position: 100% 0;
        mask-position: 0 0;
    }
    100%{
        -webkit-mask-position: 0 0;
        mask-position: 0 0;
    }
}

@keyframes mask2{
    0%{
        -webkit-mask-position: 0 0;
        mask-position: 0 0;
    }
    100%{
        -webkit-mask-position: 100% 0;
        mask-position: 100% 0;
    }
}

/*
    Aqui é a configuração do Background do botão ao fim da animaçao, note que o "background: #fff;" é a cor branca ao fundo do botão ao passar o mouse. Basta mudar para a cor desejada.
*/

.elementor-37269 .elementor-element.elementor-element-a618481:after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 6px;
    transition:  0.5s;
    
}
/*
    Aqui é a configuração da cor do texto do botão, repare que inicialmente a cor do texto é a mesma cor do fundo ao finalizar a animação. Ao fim da animação a cor do texto troca para a mesma cor do Background criado ao inicio do código. Basta altera-la a cor definida no inicio do código.
    
    E no "color: white;" é a cor inicial do texto. Ao inicio da animação ela se encontra branca!!!
*/

.elementor-37269 .elementor-element.elementor-element-a618481 .elementor-button-text{
    background: linear-gradient(90deg,#673ab7 -20%, #f48fb1 120%);
    background-clip: text;
    -webkit-background-clip: text;
    color: white;
    transition: 0.5s 0.5s;
    z-index: 2;
}

.elementor-37269 .elementor-element.elementor-element-a618481:hover .elementor-button-text{
    color: transparent;
    transition: 0.5s;
}

/* Siga agora para o segundo botão, visivel pelo navegador do elementor.

    Nele, apenas mude a cor dele de acordo com oque foi inserido neste botão.
    O segundo botão é aquele que não deixa a animação começar sozinha ao entrar ou atualizar a página, qualquer dúvida sobre este código, podem me contatar.
*//* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-cc481b0 */.elementor-37269 .elementor-element.elementor-element-cc481b0 .elementor-button{
    background: linear-gradient(90deg,#673ab7 -20%, #f48fb1 120%);
    border-radius: 4px;
    transition: 0.5s;
    z-index: 1;
    animation: sumir 0.1s 0.8s forwards;
}

.elementor-37269 .elementor-element.elementor-element-cc481b0{
    position: relative;
    top: -62px;
    pointer-events: none;

}

@keyframes sumir{
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}/* End custom CSS */