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

แชร์
ฝัง
  • เผยแพร่เมื่อ 22 ธ.ค. 2024

ความคิดเห็น • 73

  • @sergioluisz
    @sergioluisz ปีที่แล้ว

    Mito, fenomeno kkkk mostro, excelete conteúdo

  • @mesonmateus
    @mesonmateus ปีที่แล้ว +2

    ja tentei várias vezes e n vai infelizmente

    • @bergilianoklen
      @bergilianoklen  ปีที่แล้ว

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

  • @kesssilveira3290
    @kesssilveira3290 ปีที่แล้ว

    Muito obrigada, me ajudou bastante

  • @portalsintoniafinanciera
    @portalsintoniafinanciera ปีที่แล้ว +1

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

    • @bergilianoklen
      @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.

  • @millerartsaudiovisual3358
    @millerartsaudiovisual3358 4 หลายเดือนก่อน

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

    • @bergilianoklen
      @bergilianoklen  4 หลายเดือนก่อน +1

      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

  • @panzzer8162
    @panzzer8162 2 ปีที่แล้ว

    Excelente irmão.. Obrigado!

  • @wpeduardosantos2574
    @wpeduardosantos2574 10 หลายเดือนก่อน +1

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

    • @bergilianoklen
      @bergilianoklen  10 หลายเดือนก่อน

      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
      @wpeduardosantos2574 10 หลายเดือนก่อน

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

  • @franciscosilva5782
    @franciscosilva5782 ปีที่แล้ว

    Boa noite simplesmente fantástico!

  • @victorcveloso
    @victorcveloso 2 หลายเดือนก่อน

    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..

  • @alantorrecilhas
    @alantorrecilhas 7 หลายเดือนก่อน

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

  • @joaomonteiro9076
    @joaomonteiro9076 ปีที่แล้ว

    Brabo!

  • @iGreenEnergyOFC
    @iGreenEnergyOFC 11 หลายเดือนก่อน +1

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

    • @bergilianoklen
      @bergilianoklen  11 หลายเดือนก่อน

      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

  • @hugomiguel9113
    @hugomiguel9113 ปีที่แล้ว +1

    O site nao abre para mim

    • @bergilianoklen
      @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á.

  • @jeandamin
    @jeandamin ปีที่แล้ว

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

    • @bergilianoklen
      @bergilianoklen  ปีที่แล้ว +2

      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.

  • @ochristianmarcondes
    @ochristianmarcondes ปีที่แล้ว

    Parabéns amigo, surreal o vídeo.

  • @pablobatista6710
    @pablobatista6710 ปีที่แล้ว +1

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

  • @DuPepe
    @DuPepe ปีที่แล้ว

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

    • @bergilianoklen
      @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

  • @matheusrj22
    @matheusrj22 ปีที่แล้ว

    como faz pra colocar em um título?

    • @bergilianoklen
      @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.

  • @MalagodSHome
    @MalagodSHome 2 ปีที่แล้ว +1

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

    • @bergilianoklen
      @bergilianoklen  2 ปีที่แล้ว +2

      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
      @MalagodSHome 2 ปีที่แล้ว

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

    • @Feridasinvisiveis
      @Feridasinvisiveis 2 ปีที่แล้ว

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

    • @bergilianoklen
      @bergilianoklen  2 ปีที่แล้ว

      @@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

  • @wellington.willis
    @wellington.willis 2 ปีที่แล้ว +1

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

    • @bergilianoklen
      @bergilianoklen  2 ปีที่แล้ว +1

      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
      @wellington.willis 2 ปีที่แล้ว +1

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

    • @bergilianoklen
      @bergilianoklen  2 ปีที่แล้ว +1

      @@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
      @wellington.willis 2 ปีที่แล้ว

      Obrigado amigo ajudou muito

  • @FabianoFernandespro
    @FabianoFernandespro ปีที่แล้ว

    Massa tava procurando isso

  • @peppermusic2479
    @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
      @bergilianoklen  ปีที่แล้ว +1

      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
      @peppermusic2479 ปีที่แล้ว +1

      @@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!

  • @raylinebarbosaa
    @raylinebarbosaa ปีที่แล้ว

    obrigada amigo!

  • @marciopenedo5556
    @marciopenedo5556 2 ปีที่แล้ว

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

  • @FelipeFratino
    @FelipeFratino 11 หลายเดือนก่อน

    Valeu, ótimo!

  • @vitorwebp
    @vitorwebp 2 ปีที่แล้ว

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

  • @maxramon6877
    @maxramon6877 2 ปีที่แล้ว

    Muito bom mano!! Conhecendo o canal hoje.

  • @caldasmarketing
    @caldasmarketing ปีที่แล้ว

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

    • @bergilianoklen
      @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)

  • @soufabionascimento
    @soufabionascimento 2 ปีที่แล้ว +2

    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!

  • @carlossiqueiradesign
    @carlossiqueiradesign 11 หลายเดือนก่อน

    brigadão cara :D

  • @luanpena
    @luanpena ปีที่แล้ว

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

  • @ultratopianerd717
    @ultratopianerd717 2 ปีที่แล้ว

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

  • @marcuspablor
    @marcuspablor ปีที่แล้ว

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

  • @simoneruiz3261
    @simoneruiz3261 ปีที่แล้ว

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

  • @oigor6140
    @oigor6140 2 ปีที่แล้ว

    show de bola! valeu

  • @kevenasley4171
    @kevenasley4171 10 หลายเดือนก่อน

    Funcionou!

  • @mathewsferreira7782
    @mathewsferreira7782 2 ปีที่แล้ว

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

  • @weslen.fullads
    @weslen.fullads ปีที่แล้ว

    Braaaaaabíssimo!!!

  • @brenonerydsg
    @brenonerydsg ปีที่แล้ว

    valeeeeeu

  • @vitorwebp
    @vitorwebp 2 ปีที่แล้ว

    Faltou o seu site na descrição.

    • @bergilianoklen
      @bergilianoklen  2 ปีที่แล้ว +1

      Meu site é o www.websitespro.com.br

  • @thecontrabandchannel
    @thecontrabandchannel 8 หลายเดือนก่อน

    muito boom

  • @dudesbecker
    @dudesbecker 2 ปีที่แล้ว

    +1 inscrito

  • @oandersonsant
    @oandersonsant 2 ปีที่แล้ว

    Valeu irmão!

  • @somosenxame4572
    @somosenxame4572 2 ปีที่แล้ว +1

    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?