[Botão] Bordas animadas
Adicione um Widget de botão no Elementor
Defina a classe: btn
Cole esse código no botão (Avançado/Custom CSS)
Código CSS
Copiar Código
.btn{ overflow: hidden; } /* Borda animada multicolor que combina com verde */ .btn .elementor-button::before{ content: ""; position: absolute; top: 0; left: 0; width: 400%; height: 100%; background: linear-gradient( 115deg, #00FF73, #DBFFBF, #A7FFCF, #00C8FF, #00FF73 ); /* cor da borda */ background-size: 25% 100%; animation: bgs .75s linear infinite; animation-play-state: paused; translate: -5% 0%; transition: translate .25s ease-out; z-index: 0; } /* Fundo interno (escuro p/ dar contraste ao arco-íris) */ .btn .elementor-button::after{ content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(100% - 5px); height: calc(100% - 5px); background: #090909; /* cor do BG */ background-size: 25% 100%; animation: bgs .75s linear infinite; animation-play-state: paused; transition: translate .25s ease-out; z-index: 1; } /* Ativa a animação ao passar o mouse */ .btn .elementor-button:hover::before{ animation-play-state: running; transition-duration: .75s; translate: 0% 0%; } /* mantenho o seletor auxiliar como na referência */ selector *{ z-index: 2; /* garante o texto acima das camadas ::before/::after */ } /* animação do gradiente */ @keyframes bgs{ to { transform: translateX(-25%); } }