[Botão] Finch

Adicione um Widget de botão no Elementor

Não precisa definir Classe no botão

Cole esse código no botão (Avançado/Custom CSS)

Código CSS

      
.elementor-button {
    position: relative;
    background: white !important;
    border-radius: 2000px;
    --left: 0%; /* Definir a variável inicialmente */
}

.elementor-button-text {
    text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2);  /* Aplica a sombra no texto */
}



.elementor-button::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 50%;
    z-index: 99;
    width: calc(100% + 12px);
    height: calc(100% + 12px);
    border-radius: inherit;
    border: solid 1px white;
    opacity: 50%;
    background: #ffffff40;
    transition: 0.5s ease;
}

.elementor-button:hover::before {
    transition: 0.5s ease;
    opacity: 0%;
    background: #ffffff40
}

.elementor-button::after {
    content: "";
    z-index: 9999;
    position: absolute;
    top: 50%;
    transform: translate(0%, -50%);
    left: var(--left, 0%);
    background: rgb(255, 207, 74);
    width: 15%;
    height: 80%;
    filter: blur(15px);
    opacity: 70%;
    mix-blend-mode: screen;
    /* Remova a transição */
    transition: none;
}

Adicione um Widget de botão no HTML

Pode ser no fim da página

Cole esse código dentro do Widget de HTML

Código HTML/JS

 <script type="litespeed/javascript" data-src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.1/gsap.min.js"></script> <script type="litespeed/javascript">document.addEventListener("DOMContentLiteSpeedLoaded",function(){console.log('JS carregado!');const button=document.querySelector('.elementor-button-link');let lastPercentage=0;const brilhoWidth=15;if(button){button.addEventListener('mousemove',(e)=>{const rect=button.getBoundingClientRect();const mouseX=e.clientX-rect.left;const buttonWidth=rect.width;let percentage=((mouseX/buttonWidth)*100)-(brilhoWidth/2);if(percentage<0){percentage=0}
if(percentage>100-brilhoWidth){percentage=100-brilhoWidth}
button.style.setProperty('--left',`${percentage}%`);lastPercentage=percentage});button.addEventListener('mouseleave',()=>{button.style.setProperty('--left',`${lastPercentage}%`)})}else{console.log('Botão não encontrado!')}})</script>