[Botão] Brilho Fundo
[Botão] Brilho Fundo Adicione um Widget de botão no Elementor Não precisa definir classe Cole esse código no botão (Avançado/Custom CSS) Código CSS Copiar Código .elementor-button{ background: #00FF73 !important; border: 1px solid #00FF73 !important; /*defina a borda*/ box-shadow: 0 0 5px #00FF73, /*defina o brilho*/ 0 0 20px #00FF73, /*defina o brilho*/ 0 0 50px #00FF73, /*defina o brilho*/ 0 0 100px #00FF73 !important; /*defina o brilho*/ }
[Botão] Cortes de canto
[Botão] Cortes de canto Adicione um Widget de botão no Elementor Não precisa definir classe Recomendo deixar a cor de fundo do botão sem cor (transparente) Corte (embaixo e a direita) Código CSS Copiar Código .elementor-button{ background: linear-gradient(-45deg, transparent 10px, #00FF73 0); } Corte (embaixo e a esquerda) Código CSS Copiar Código .elementor-button{ background: linear-gradient(45deg, transparent 10px, #00FF73 0); } Corte (Superior e a esquerda) Código CSS Copiar Código .elementor-button{ background: linear-gradient(45deg, transparent 10px, #00FF73 0); } Corte (Superior/Direita) Código CSS Copiar Código .elementor-button{ background: linear-gradient(-135deg, transparent 10px, #00FF73 0); } Corte (Dois cantos) Código CSS Copiar Código .elementor-button{ background: linear-gradient(-135deg, transparent 10px, #00FF73 0) right, linear-gradient(45deg, transparent 10px, #00FF73 0) left; background-size: 50% 100%; background-repeat: no-repeat; } Corte (Quatro cantos) Código CSS Copiar Código .elementor-button{ background: linear-gradient(135deg, transparent 10px, #00FF73 0) top left, linear-gradient(-135deg, transparent 10px, #00FF73 0) top right, linear-gradient(-45deg, transparent 10px, #00FF73 0) bottom right, linear-gradient(45deg, transparent 10px, #00FF73 0) bottom left; background-size: 50% 50%; background-repeat: no-repeat; }
[Botão] Gradiente animado
[Botão] Gradiente animado Adicione um Widget de botão no Elementor Não precisa definir classe Cole esse código no botão (Avançado/Custom CSS) Código CSS Copiar Código .elementor-button{ animation: 3.4s cubic-bezier(0.2, 0.5, 0.9, 0.6) 2s infinite normal none running textura; background-image: linear-gradient(45deg, #00FF73, #BEFFB5, #00FF73, #BEFFB5); /* defina as cores do BG aqui (verdes) */ background-size: 400% 200%; transition: background 1.6s cubic-bezier(0.55, 0.1, 0.47, 0.94) 0s; } @keyframes textura{ 0% { background-position: 0 0; } 100% { background-position: 100% 0; } }
[Botão] Sombra box
[Botão] Sombra box 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{ background: #090909; /* defina a cor do BG aqui (escuro p/ contraste) */ border-radius: .5rem; /* defina o arredondamento aqui */ /* bordas “alto-relevo” em verde */ border-bottom: 2px solid #00FF73; border-right: 2px solid #00FF73; border-top: 2px solid #090909; border-left: 2px solid #090909; transition-duration: 1s; transition-property: border-top, border-left, border-bottom, border-right, box-shadow; } .btn:hover{ /* inverte o relevo e adiciona brilho */ border-top: 2px solid #00FF73; border-left: 2px solid #00FF73; border-bottom: 2px solid #68FFAC; border-right: 2px solid #68FFAC; /* cores do hover (glow em verde) */ box-shadow: rgba(0, 255, 115, 0.40) 5px 5px, rgba(0, 255, 115, 0.30) 10px 10px, rgba(0, 255, 115, 0.20) 15px 15px; }
[Botão] Giro + Preenchimento
[Botão] Giro + Preenchimento 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{ border: 4px solid #00FF73; /* configure a borda aqui (verde neon) */ transition: ease-in-out 0.3s; background-color: transparent; /* cor do BG (estado normal) */ } .btn:hover{ transform: scale(1.2) rotate(10deg); /* aumento e giro do hover aqui */ background-color: #002511; /* cor do BG no hover (verde bem escuro) */ /* se preferir mais “brilho”, use: background-color: #00FF73; color: #002511; */ }
[Botão] Bordas animadas v2
[Botão] Bordas animadas v2 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 { width: 350px; /*largura do botão*/ height: 64px; /*altura do botão*/ border-radius: 200px; background: linear-gradient( to right, #00FF73, #00C8FF, #00FF73, #00FF73, #00C8FF, #00FF73 ); /* cor da borda (verde + ciano p/ mais contraste) */ background-size: 250%; background-position: left; display: flex; align-items: center; justify-content: center; transition-duration: 1s; overflow: hidden; } .btn::before { position: absolute; content: “Clique aqui”; /*texto do botão*/ color: #00FF73; /*cor do texto do botão (verde neon p/ alto contraste)*/ display: flex; align-items: center; justify-content: center; width: 97%; height: 90%; border-radius: 200px; transition-duration: 1s; background-color: rgba(9, 9, 9, 0.92); /*bg do botão escuro (#090909)*/ background-size: 200%; } .btn:hover { background-position: right; transition-duration: 1s; } .btn:hover::before { background-position: right; transition-duration: 1s; } .btn:active { transform: scale(0.95); }
[Botão] Bordas animadas
[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%); } }
[Botão] Seta redonda + Giro
[Botão] Seta redonda + Giro Adicione um Widget de botão no Elementor Defina a classe: btn Coloque um Icone ao botão de Arrow (Seta) para direita, exemplo: Cole esse código no botão (Avançado/Custom CSS) Código CSS Copiar Código /* mesmos seletores, só troquei .bth → .btn e mantive o fix do rotate() */ .btn .elementor-button{ padding: 0.4rem 0.4rem 0.4rem 2rem !important; border-radius: 55px !important; background: linear-gradient(92deg, #00FF73 -3.01%, #68FFAC 95.31%) !important; /* Gradiente do BG (verde) */ } .btn .elementor-button-text{ align-self: center; } .btn .elementor-button-icon{ font-size: 19px !important; padding: 10px; margin-left: 10px; background: #000704; /* cor da bola do icon */ border-radius: 200px; color: #00FF73 !important; vertical-align: middle; transform: rotate(-45deg); /* rotação inicial */ transition: 0.5s ease all; } .btn .elementor-button-icon svg path{ transform: rotate(0deg); fill: #000000 !important; color: #000000 !important; transition: 0.7s ease all; } .btn:hover .elementor-button-icon{ transform: rotate(0deg); /* “desvira” no hover */ }
[Botão] Brilho Hover
[Botão] Brilho Hover 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{ border-radius: 50px; /* defina o arredondamento */ transition: transform 50ms ease; background: linear-gradient(90deg, #00FF73, #68FFAC, #00FF73, #68FFAC); /* defina as cores do BG aqui */ background-size: 400%; overflow: visible; transition: box-shadow, 0.4s; /* mantém igual ao original */ } .btn:hover{ -webkit-box-shadow: 0px 0px 15px 0px rgba(0, 255, 115, 0.9); /* cor do efeito no hover */ box-shadow: 0px 0px 35px 0px rgba(0, 255, 115, 0.6); /* cor do efeito no hover */ animation: animate 8s ease infinite; /* mantém a primeira linha (como no original) */ transform: scale(1.05, 1.05); animation: animate 7s cubic-bezier(0.75, 0.75, 0.75, 0.75) infinite; /* última linha prevalece, igual ao original */ } .btn:hover:before{ /* se existir ::before no HTML/CSS, aplica blur/brilho no hover */ filter: blur(20px); /* tamanho do desfoque */ opacity: 1; animation: animate 8s linear infinite; } @keyframes animate{ 0% { background-position: 0%; } 100% { background-position: 400%; } } /* mantenha se você usava esse seletor auxiliar */ selector{ overflow: visible; }
[Botão] Preenchendo do centro
[Botão] Preenchendo do centro Adicione um Widget de botão no Elementor Não precisa definir classe, recomendo deixar o fundo do botão em uma cor mais escura (ou preto). Cole esse código no botão (Avançado/Custom CSS) Código CSS Copiar Código .elementor-button{ border: 2px solid #00FF73; /* cor da borda (verde) */ border-radius: 34px; /* arredondamento */ transition: all .3s cubic-bezier(0.23, 1, 0.320, 1); overflow: hidden; position: relative; /* âncora pro ::before (mantém o efeito no botão) */ } .elementor-button::before{ /* efeito hover (onda) */ content: ”; position: absolute; inset: 0; margin: auto; width: 80px; /* aumente o tamanho se necessário */ height: 80px; /* aumente o tamanho se necessário */ border-radius: inherit; scale: 0; z-index: -1; background-color: #1B7946; transition: all 1s cubic-bezier(0.23, 1, 0.320, 1); } .elementor-button:hover::before{ scale: 3.3; /* expande no hover */ } .elementor-button:hover{ color: #002511; /* cor do texto no hover (verde bem escuro p/ contraste) */ scale: 1.1; box-shadow: 0 0 20px #00FF7340; /* brilho suave em verde */ }