Como criar um efeito de animação gradiente com CSS e usar no botão do Elementor

[@soufabionascimento]

Eu vi uma página de captura com o botão assim hoje, agora apareceu esse vídeo pra mim! Muito bom, vou aplicar num projeto meu!

[@simoneruiz3261]

Eu estou criando minha PV e queria muito esse tipo de botão. Muito obrigada! Ganhou uma inscrita.

[@franciscosilva5782]

Boa noite simplesmente fantástico!

[@marcuspablor]

esse vídeo foi para minha pasta de vídeos úteis, salvou demais irmão!

[@luanpena]

Muito obrigado pelo vídeo! Excelente didática meu querido!

[@ochristianmarcondes]

Parabéns amigo, surreal o vídeo.

[@alantorrecilhas]

muito bom amigo, parabéns pelo video e conteudo! ajudou muito!

[@sergioluisz]

Mito, fenomeno kkkk mostro, excelete conteúdo

[@bergilianoklen]

Hahahaha TMJ!

[@marciopenedo5556]

Top demais queridão! Gostei demais do seu vídeo. Tmj.

[@bergilianoklen]

Muito obrigado! Tmj

[@ultratopianerd717]

Cara vídeo sensacional mano, parabéns pelo conteúdo.... + 1 inscrito

[@bergilianoklen]

Muito obrigado!! TMJ!

[@kesssilveira3290]

Muito obrigada, me ajudou bastante

[@maxramon6877]

Muito bom mano!! Conhecendo o canal hoje.

[@bergilianoklen]

Obrigado!! 💪🏻

[@mathewsferreira7782]

Cara vídeo incrível, muito bom vc me salvou kk

[@vitorwebp]

Gostei muito do vídeo, meu caro! Já vou usar, obrigado!

[@bergilianoklen]

Show de bola! 😉

[@portalsintoniafinanciera]

Pra mim funciona enquanto estou editando no elementor...quando coloco entro no site em outro lugar, não funciona. O que pode ser?

[@bergilianoklen]

Versão do navegador que não funciona, algum outro código que está gerando conflito com o código que você fez... teria que dar uma revisada em todos os códigos usados no site para achar onde tá o erro.

[@panzzer8162]

Excelente irmão.. Obrigado!

[@bergilianoklen]

Obrigado!

[@jeandamin]

tem como colocar esse efeito somente quando eu vou com o mouse em cima do botão ( Hover ) ?

[@bergilianoklen]

Sim, no código ao invés de usar: selector .elementor-button{ Você vai usar: selector .elementor-button:hover para usar só no botão selecionado ou .elementor-button:hover para colocar em todos os botões. Essa opção :hover que faz funcionar só quando o mouse está sobre o objeto.

[@mesonmateus]

ja tentei várias vezes e n vai infelizmente

[@bergilianoklen]

Se quiser me chamar no Instagram e me passar o que tá acontecendo, fica a vontade. @profissao.webdesigner

[@MalagodSHome]

Aplicando o efeito acaba indo em todos os botões do site, como faz para aplicar apenas no que eu quero?

[@bergilianoklen]

Adiciona "selector" antes do id no CSS. Vai ficar assim: selector .elementor-button { código css } Se não der certo, me chama lá no Instagram que vemos isso diretamente.

[@MalagodSHome]

@@bergilianoklen Vou fazer o teste, obrigado irmão!🔥

[@Feridasinvisiveis]

Eu fiz do jeito que vc disse, mas comigo não deu certo, continuou todos os botões 😕

[@bergilianoklen]

@@Feridasinvisiveis você colocou da seguinte forma no CSS do botão que quer alterar: selector .elementor-button{ código css } ? Para funcionar em um botão específico tem que colocar assim, ou aplicar uma classe ao botão e colocar essa classe no código, por exemplo: Classe do botão for .botaogradiente daí vai ficar assim: .botaogradiente .elementor-button{ código css } Qualquer coisa me chama no Instagram que te auxilio: @bergklen

[@FabianoFernandespro]

Massa tava procurando isso

[@pablobatista6710]

KKKKKK eu vim no vídeo, JUSTAMENTE PRA COLOCAR EM UMA PÁGINA DE VENDAS PARA ADVOGADOS!! kkkkkkkk Eu ri muito agora!!

[@bradockincrypto]

kkkkkkkkkkkkkkkkkkkkkkkkkkkkk

[@MarkAngels]

Poderia disponibilizar o código nos comentários? agradeceria muito!

[@oigorsouza]

show de bola! valeu

[@joaomonteiro9076]

Brabo!

[@wpeduardosantos2574]

No meu não funcionou. Mesmo aplicando .elementor-button está diferente do usado no seu vídeo

[@bergilianoklen]

O efeito não aplica no botão? O botão já está editado pelo editor de estilos? Caso sim, limpe toda a edição e veja se funciona. Até hoje eu utilizo esse código e não tive problemas.

[@wpeduardosantos2574]

Eu joguei o código no ChatGPT e ele corrigiu, então funcionou. Não sei pq não funcionava@@bergilianoklen

[@matheusrj22]

como faz pra colocar em um título?

[@bergilianoklen]

Dá pra colocar em título sim, dá pra colocar ele animado no título ainda, porém o código vai ser bem diferente desse do botão, pode ser uma ideia de novo vídeo, já estou há um bom tempo sem gravar aqui.

[@millerartsaudiovisual3358]

Grande mestre, Como deixar funcionando num só botão?

[@bergilianoklen]

Sim, adiciona uma classe nesse botão lá na parte de edição/Avançado, depois no código é só adicionar a classe que você deu ao botão, daí ficaria assim: .classenova .elementor-button

[@peppermusic2479]

Like garantido e ganhou mais um inscrito! Consigo aplicar o mesmo código, para criar uma barra com esse efeito que consiga utilizar abaixo do menu do site? Parabéns pela excelente aula! Abraço!

[@bergilianoklen]

Consegue, no caso você não usa a classe do botão, coloca o código no css do contêiner utilizando só o selector, provavelmente tem que alterar algo no código também.

[@peppermusic2479]

@@bergilianoklen Muito obrigado pela atenção e explicação. Vou fazer exatamente assim. Mais uma vez, parabéns pelo canal e didática! Abraços!

[@wellington.willis]

adorei !!! como faço para colocar em um botão especifico. porque fiz em um e mudou todos ???

[@bergilianoklen]

Que bom que gostou! Para aplicar somente em um botão utilize o selector antes do .elementor-button, daí vai ficar assim? selector .elementor-button { código CSS } Ou você pode adicionar uma Class no botão, selecione o botão, vai na aba Avançado - Classe CSS, adicionar um nome, botaograd, por exemplo. Daí fica assim: .botaograd .elementor-button { código css } Você pode repetir a classe em outros botões sem a necessidade de ficar repetindo o código.

[@wellington.willis]

@@bergilianoklen show eu consegui. ajudou muito. aquele icon do botão aumenta também dentro de container ou só se for botão ?

[@bergilianoklen]

@@wellington.willis tem um código css pra alterar o tamanho do botão: selector .elementor-button-icon i:before{ font-size: 30px; } .elementor-button-content-wrapper{ align-items: center } Você consegue alterar o tamanho ao mudar o valor de font-size do código acima.

[@wellington.willis]

Obrigado amigo ajudou muito

[@hugomiguel9113]

O site nao abre para mim

[@bergilianoklen]

Testei aqui e não abriu, devem estar passando por alguma instabilidade. O site é de terceiros, não é meu. Vale tentar mais tarde ou procura no Google por "gradient animation css generator", deve ter alguma coisa lá.

[@iGreenEnergyOFC]

o meu não funciona por nada ao invés de ficar no botão ele vai pro fundo do container

[@bergilianoklen]

Use a Classe do botão do Elementor .elementor-button Provavelmente você tá colocando o código no CSS Personalizado do Conteiner e utilizando o seletor "selector" ao invés da classe .elementor-button

[@FelipeFratino]

Valeu, ótimo!

[@weslen.fullads]

Braaaaaabíssimo!!!

[@raylinebarbosaa]

obrigada amigo!

[@victorcveloso]

Pra quem não ta conseguindo pode ser que o navegador esteja traduzindo o código de ingles pra português ai muda o código e o elementor não entende..

[@oandersonsant]

Valeu irmão!

[@kevenasley4171]

Funcionou!

[@DuPepe]

Funciona so no Elementor, ou dá certo na Wix tb?

[@bergilianoklen]

Se o wix tiver possibilidade de colocar código css, funciona também, só vai ser diferente em relação as classes que mostro no vídeo, que são do Elementor

[@thecontrabandchannel]

muito boom

[@carlossiqueiradesign]

brigadão cara :D

[@bl1tz_x]

vixi esse site não funciona mais :(

[@dudesbecker]

+1 inscrito

[@caldasmarketing]

Não funcionou no meu, ficou estatico no final. :(

[@bergilianoklen]

Confere o código, talvez tenha algum erro na função :hover (que é a função que ativa o efeito ao passar o mouse sobre)

[@brenonerydsg]

valeeeeeu

[@vitorwebp]

Faltou o seu site na descrição.

[@bergilianoklen]

Meu site é o www.websitespro.com.br

[@somosenxame4572]

Coloquei e o código e ele sumiu. rsrs. Após ví que aplicou em todos os botões das subpáginas. Daí fui procurar e não estava mais no botão que coloquei. Onde encontro para excluir o efeito?