[Botão] Brilho Plus
[Botão] Brilho Plus Adicione um Widget de botão no Elementor Defina a classe: btn Recomendo deixar a cor de fundo do botão Preto para funcionar corretamente. Cole esse código no botão (Avançado/Custom CSS) Código CSS Copiar Código .btn{ border-radius: 8px; /* defina o arredondamento aqui */ text-shadow: none; background: transparent !important; /* cor do BG (normal) */ border: 1px solid #00FF7380; /* configure a borda (verde com ~50% opacidade) */ transition: 0.5s ease; } /* Hover/Focus: brilho e fundo verdes */ .btn:hover, .btn:focus{ background: #00FF73; /* cor do BG no hover */ /* Se preferir degradê: background: linear-gradient(90deg, #00FF73, #68FFAC); */ border: 1px solid #00FF73; /* borda no hover */ text-shadow: 0 0 5px #ffffff, /* brilho do texto */ 0 0 10px #ffffff, 0 0 20px #ffffff; box-shadow: 0 0 5px #00FF73, /* brilho externo (verde) */ 0 0 20px #00FF73, 0 0 50px #00FF73, 0 0 100px #00FF73; }
[Botão] Preenchendo + Glow
[Botão] Preenchendo + Glow 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-text{ z-index: 2; } .elementor-button{ width: 100%; border: none; position: relative; overflow: hidden; z-index: 1; /* sombra do botão (neumórfico leve) — ajuste se quiser mais/menos) */ box-shadow: 6px 6px 12px #AEFFD350, -6px -6px 12px #AEFFD320 !important; /* sombra do botão */ } /* Fita de cor que “entra” no hover */ .elementor-button::before{ content: “”; width: 0; /* começa fechado */ height: 100%; border-radius: 30em; /* arredondamento da fita */ position: absolute; top: 0; left: 0; /* COR DO BG NO HOVER (verde): edite aqui */ background-image: linear-gradient(to right, #00FF73 0%, #68FFAC 100%); transition: .5s ease; display: block; z-index: 0; } .elementor-button:hover::before{ width: 100%; /* cobre todo o botão no hover */ }
[Botão] Brilho animado
[Botão] Brilho 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{ position: relative; /* necessário para o ::before */ width: fit-content !important; /* ajusta à largura do conteúdo */ overflow: hidden; /* evita o brilho “vazar” */ } .elementor-button:hover::before{ animation: brilho .8s linear; /* tempo do “feixe” */ } .elementor-button::before{ content: “”; position: absolute; top: 0; left: 0; height: 100%; opacity: 0; transform: skewX(-30deg); mix-blend-mode: plus-lighter; /* feixe + halo em verde */ background: #00FF73; /* feixe principal */ box-shadow: 0 0 30px 20px #68FFACAA;/* halo (ajuste opacidade se quiser) */ } @keyframes brilho{ 0% { opacity: 0; left: 0%; } 50% { opacity: 1; } 100% { opacity: 0; left: 100%; } }
[Botão] Borda girando
[Botão] Borda girando Adicione um Widget de botão no Elementor Defina a Classe no botão : btn Cole esse código no botão (Avançado/Custom CSS) Código CSS Copiar Código .elementor-button{ z-index: 5 !important; position: relative; border-radius: 12px !important; /* arredondamento da borda */ } /* troquei apenas a classe: .botao → .btn, e ajustei as cores p/ verde */ .btn::before{ content: ”; position: absolute; transform: translate(-50%, -50%); left: 50%; top: 50%; margin: auto; width: calc(100% + 4px); height: calc(100% + 4px); border-radius: 12px; /* arredondamento da borda */ background: linear-gradient(-45deg, #00FF73 0%, #68FFAC 100%); /* cor da borda */ z-index: 0; pointer-events: none; transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .btn::after{ content: “”; z-index: 0; position: absolute; inset: 0; background: linear-gradient(-45deg, #00FF73 0%, #68FFAC 100%); /* cor do brilho */ transform: translate3d(0, 0, 0) scale(0.95); filter: blur(20px); /* desfoque do brilho */ } .btn:hover::before{ transform: rotate(-180deg) translate(50%, 50%); }
[Botão] Pulsar Hover V2
[Botão] Pulsar Hover V2 Adicione um Widget de botão no Elementor Defina a Classe no botão : btn Cole esse código no botão (Avançado/Custom CSS) Código CSS Copiar Código .btn{ /* ===== Tokens editáveis ===== */ –bg: linear-gradient(90deg, #00FF73, #68FFAC); /* defina a cor/gradiente do BG aqui */ –splash: #00FF73; /* cor que “expande” no hover */ text-transform: uppercase; display: inline-block; position: relative; /* necessário p/ posicionar o ::after */ isolation: isolate; /* mantém z-index do ::after por trás */ border-radius: 6em !important; /* defina o arredondamento aqui */ background: var(–bg) !important; /* fundo do botão */ transition: all .5s; } .btn:hover{ transform: translateY(-3px); box-shadow: 0 10px 20px #18181840; /* defina a sombra do hover aqui */ } .btn::after{ /* camada que expande e some no hover */ content: “”; position: absolute; inset: 0; z-index: -1; /* fica atrás do botão */ border-radius: 100px !important; /* ajuste se quiser mais/menos arredondado */ background-color: var(–splash); /* defina a cor que irá expandir */ transition: all .8s; } .btn:hover::after{ transform: scaleX(1.2) scaleY(1.4); /* defina o quanto irá expandir */ opacity: 0; }
[Botão] Pulsar Hover
[Botão] Pulsar Hover Adicione um Widget de botão no Elementor Defina a Classe no botão : button Cole esse código no botão (Avançado/Custom CSS) Código CSS Copiar Código /* – Cores do BG: mude no linear-gradient abaixo (#00FF73 → #84FFBC) – Arredondamento: ajuste o border-radius – Tempo da animação: mude o “2s” nas declarações de animation */ .button .elementor-button{ background: linear-gradient(30deg, #00FF73, #68FFAC); /* defina as cores do BG aqui */ border-radius: 20px; /* defina o arredondamento aqui */ background-size: 100% auto; } /* Hover: desloca o gradiente e aplica pulsação */ .button:hover .elementor-button{ background-position: right center; background-size: 200% auto; -webkit-animation: pulse512 2s infinite; /* defina o tempo da animação */ animation: pulse512 2s infinite; /* defina o tempo da animação */ } /* Efeito de “pulso” (aura) em verde */ @keyframes pulse512 { 0% { box-shadow: 0 0 0 0 #00FF7380; /* verde com ~50% de opacidade */ } 70% { box-shadow: 0 0 0 20px #00000000; /* desaparece (transparente) */ } 100% { box-shadow: 0 0 0 0 #00000000; /* volta ao inicial (transparente) */ } }
[Botão] Iluminado no Hover
[Botão] Iluminado no Hover 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 { transition: 0.4s; /*defina o tempo de transição*/ } .elementor-button:hover { box-shadow: 4px 4px 70px -14px #D9FFEA; /*defina a cor e tamanho do brilho*/ }
[Botão] Flash + Pulsar
[Botão] Flash + Pulsar 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 /* Botão com BG animado — versão verde Como editar: – Troque as cores do gradient se quiser (hex com #) – Ajuste a intensidade do zoom no 50% (scale) */ .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, /* verde principal */ #D5FFE8, /* verde claro */ #00FF73, #D5FFE8 ); /* defina a cor do BG aqui */ 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; transform: scale(1); /* estado inicial */ } 50%{ transform: scale(1.1); /* defina o quanto irá aumentar */ } 100%{ background-position: 100% 0; transform: scale(1); /* volta ao tamanho original */ } }
[Botão] Luz expandindo
[Botão] Luz expandindo 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: luzes 2s linear infinite; /*defina o tempo da animação*/ } @keyframes luzes{ 0%{ box-shadow: 0 0 30px -20px #20BC67; /*defina a cor da luz aqui*/ } 90%{ box-shadow: 0 0 0 30px transparent; } 100%{ box-shadow: 0 0 0 0px transparent; } }
[Botão] Completando + Cortes laterais
[Botão] Completando + Cortes laterais Adicione um Widget de botão no Elementor Defina a Classe no botão : btn Cole esse código no botão (Avançado/Custom CSS) Código CSS Copiar Código /* Botão com borda animada — versão HLM (verdes) Como customizar rapidamente: – Troque as cores no bloco de vars abaixo – –border-color: degrade da borda animada – –bg: cor de fundo interna do botão – –color: cor do texto (fica branco no hover) */ .btn { /* ======= Vars do tema (verdes) ======= */ –border-color: linear-gradient(-45deg, #0F4226, #009A46, #20BC67); /* degrade da borda */ –border-width: .125em; /* espessura da borda “recortada” */ –curve-size: .5em; /* raio dos cortes nos cantos */ –blur: 30px; /* não usado diretamente, mas útil p/ variantes */ –bg: #000704; /* fundo interno do botão (verde bem escuro) */ –color: #eafff4; /* cor do texto (claro) */ color: var(–color); /* mantém a função/estrutura original */ position: relative; /* BG/efeitos presos ao botão */ isolation: isolate; display: inline-grid; place-content: center; padding: .5em 1.5em; font-size: 17px; border: 0; text-transform: uppercase; box-shadow: 10px 10px 20px rgba(0, 0, 0, .6); /* “recorte” do contorno com cantos curvos */ clip-path: polygon( 0% var(–curve-size), var(–curve-size) 0, 100% 0, 100% calc(100% – var(–curve-size)), calc(100% – var(–curve-size)) 100%, 0 100% ); transition: color 250ms; } .btn::after, .btn::before { content: ”; position: absolute; inset: 0; /* cobre toda a área do botão */ } /* camada de borda animada (degrade em movimento) */ .btn::before { background: var(–border-color); background-size: 300% 300%; animation: move-bg7234 5s ease infinite; z-index: -2; /* atrás de tudo */ } @keyframes move-bg7234 { 0% { background-position: 31% 0% } 50% { background-position: 70% 100% } 100% { background-position: 31% 0% } } /* camada interna (fundo do botão) “recortada” para revelar a borda */ .btn::after { background: var(–bg); z-index: -1; clip-path: polygon( var(–border-width) calc(var(–curve-size) + var(–border-width) * .5), calc(var(–curve-size) + var(–border-width) * .5) var(–border-width), calc(100% – var(–border-width)) var(–border-width), calc(100% – var(–border-width)) calc(100% – calc(var(–curve-size) + var(–border-width) * .5)), calc(100% – calc(var(–curve-size) + var(–border-width) * .5)) calc(100% – var(–border-width)), var(–border-width) calc(100% – var(–border-width)) ); transition: clip-path 500ms; } /* hover/focus: anima o “recorte” para destacar a borda */ .btn:where(:hover, :focus)::after { clip-path: polygon( calc(100% – var(–border-width)) calc(100% – calc(var(–curve-size) + var(–border-width) * 0.5)), calc(100% – var(–border-width)) var(–border-width), calc(100% – var(–border-width)) var(–border-width), calc(100% – var(–border-width)) calc(100% – calc(var(–curve-size) + var(–border-width) * .5)), calc(100% – calc(var(–curve-size) + var(–border-width) * .5)) calc(100% – var(–border-width)), calc(100% – calc(var(–curve-size) + var(–border-width) * 0.5)) calc(100% – var(–border-width)) ); transition: 200ms; } /* texto fica branco no destaque */ .btn:where(:hover, :focus) { color: #ffffff; }