Como colocar delay no botão do Elementor: 3 tipos

Quando alguém fala “quero colocar delay no botão do Elementor”, pode estar querendo coisas bem diferentes. Entender qual tipo de delay você precisa é o primeiro passo para escolher o método correto.

Tipo 1: delay de aparição (sem código, nativo do Elementor)

Este é o mais usado em páginas de vendas: o botão aparece na tela apenas depois de alguns segundos, seja no carregamento da página ou quando o visitante rola até aquela seção.

O Elementor tem esse recurso nativamente na aba Avançado, sem precisar de código ou plugin extra.

Passo 1: Selecione o widget de botão no editor do Elementor.

Passo 2: Vá na aba Avançado (terceira aba no painel esquerdo).

Passo 3: Abra a seção Efeitos de Movimento.

Passo 4: Em Animação de Entrada, escolha o tipo de animação (fadeIn, slideInUp, zoomIn, etc.).

Passo 5: Ajuste:

• Duração da Animação — velocidade da animação (normal, lento, extra lento)
• Atraso da Animação — quantos milissegundos esperar antes de iniciar (200ms = 0,2s, 1000ms = 1s)

Passo 6: Salve e visualize. O botão aparece com o delay configurado a partir do momento em que entra no viewport do visitante.

O canal Leonardo Amoyr mostrou como esse recurso nativo funciona na prática e por que é mais eficiente do que soluções externas:

Importante: Este tipo de delay é visual. O botão está presente no HTML mas invisível até a animação. Usuários com JavaScript desativado ou leitores de tela veem o botão normalmente.

Tipo 2: delay de hover com CSS (transição suave)

Para adicionar uma transição suave no botão quando o usuário passa o mouse, sem precisar esperar um tempo específico:

Via Elementor (sem código): Na aba Estilo do widget de botão, as propriedades de Hover já aplicam transições. A opção Duração da Transição (quando disponível no tema) controla a suavidade.

Via CSS personalizado (controle total): Selecione o widget, vá em Avançado > CSS Personalizado e adicione:

selector {
  transition: background-color 0.4s ease, transform 0.2s ease;
}

selector:hover {
  background-color: #0a58ca;
  transform: translateY(-2px);
}

Para adicionar um delay específico antes da transição começar:

selector {
  transition: background-color 0.4s ease 0.1s; /* delay de 100ms */
}

O quarto valor do transition é o delay: transition: propriedade duração timing delay.

A documentação MDN sobre transition-delay explica todos os valores aceitos com exemplos interativos.

Tipo 3: delay de habilitação (botão bloqueado por X segundos)

Esse tipo é comum em páginas onde o usuário precisa aceitar termos ou assistir um trecho de conteúdo antes de poder clicar. O botão aparece visualmente mas fica desabilitado (cinza, não clicável) até o tempo expirar.

Requer JavaScript. A forma mais segura de injetar JS no WordPress é via WPCode (gratuito) ou via Elementor Custom Code (Elementor Pro).

Código JavaScript:

// Aguarda o DOM carregar
document.addEventListener('DOMContentLoaded', function() {
  // Seleciona o botão pelo ID ou classe
  var btn = document.querySelector('.elementor-button');
  
  if (btn) {
    // Desabilita o botão e altera o visual
    btn.disabled = true;
    btn.style.opacity = '0.5';
    btn.style.cursor = 'not-allowed';
    btn.textContent = 'Disponível em 30s...';
    
    // Habilita após 30 segundos (30000ms)
    setTimeout(function() {
      btn.disabled = false;
      btn.style.opacity = '1';
      btn.style.cursor = 'pointer';
      btn.textContent = 'Continuar';
    }, 30000);
  }
});

Como encontrar a classe correta do botão: Clique com o botão direito no botão da página > Inspecionar > copie a classe CSS que o Elementor gerou (começa com elementor-button). Se o botão tem um ID personalizado, use #seu-id em vez de .elementor-button.

Para aplicar em um botão específico e não em todos os botões da página, adicione um ID ao widget:

• Selecione o widget de botão no Elementor
• Aba Avançado > ID CSS > adicione um ID único (ex: btn-delay-termos)
• Use #btn-delay-termos no seletor do JavaScript

Qual método escolher

Se você está criando uma landing page de vendas com vídeo (VSL), o Tipo 1 via Efeitos de Movimento é o caminho mais rápido e não depende de código.

Se quiser um botão com transição elegante no hover, o Tipo 2 com CSS resolve com poucas linhas.

Se precisa forçar que o usuário espere antes de clicar (aceite de termos, conteúdo obrigatório), o Tipo 3 com JavaScript é o único que realmente bloqueia a interação.

Para um exemplo de como o delay no botão é aplicado em páginas de vendas profissionais, veja como construir e clonar esse tipo de estrutura em como clonar e duplicar página de vendas no Elementor.

Perguntas frequentes

Como fazer o botão aparecer depois de X segundos no Elementor Free?

Na aba Avançado do widget, acesse Efeitos de Movimento > Animação de Entrada. Escolha a animação e ajuste o Atraso da Animação em milissegundos. Esse recurso está disponível no Elementor gratuito.

É possível colocar delay no botão do Elementor sem código?

Sim, para o delay de aparição. O Elementor tem o recurso nativo de animação de entrada com delay na aba Avançado. Para delay de habilitação (botão bloqueado), JavaScript é necessário.

Como colocar delay apenas em mobile no Elementor?

Para animações de entrada, o Elementor permite configurar a Responsividade nos Efeitos de Movimento, definindo comportamentos diferentes para desktop, tablet e mobile. Para CSS com delay, use media queries dentro do CSS personalizado.

O delay de aparição afeta o SEO?

Não. O conteúdo do botão está presente no HTML e é lido normalmente pelos buscadores. A animação de entrada é puramente visual e executada via CSS/JavaScript no navegador do visitante, sem impacto no conteúdo indexado.

Como colocar delay em animações de seção inteira, não só no botão?

O mesmo processo da aba Avançado > Efeitos de Movimento se aplica a qualquer widget ou container no Elementor. Selecione a seção, aplique a animação de entrada e configure o delay. Cada elemento pode ter seu próprio tempo, criando uma sequência visual.