DESIGN

Como Colocar Efeitos de Pulsar, Vibrar e Tremer em Botões no Elementor com CSS

06 Outubro, 2022 10 min de leitura

André Silva Web Designer

Usar códigos CSS para animar botões ou seções em sites WordPress é uma otima forma de chamar a atenção de seus visitantes!

Como inserir os códigos na sua página

Inserir os códigos na página é bem simples. Basta nomear corretamente o botão ou seção com o ID correspondente. Você vai usar esse mesmo nome de ID no código CSS assim, a animação é aplicada automaticamente.

Você encontra a área CUSTON CSS no menu avançado do Elementor ou na página de personalização do tema.

No vídeo abaixo eu mostro como encontrar esses campos e como adicionar os nomes de ID e inserir os códigos de forma correta. Da uma conferida!

Aqui em baixo você também encontra os códigos que usei no vídeo para você salvar.

Código para pulsar:

#ID {
  -webkit-animation: pulse 0.5s infinite;
}
.pulse-button:hover {
  -webkit-animation: none;
}

Código para Vibrar:

#ID {
  -webkit-animation: vibrate 0.62s cubic-bezier(.36, .07, .19, .97) infinite;
  animation: vibrate 0.62s cubic-bezier(.36, .07, .19, .97) infinite;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 300px;
  perspective: 300px;
}

@keyframes vibrate {
  0.50%, 90% {
   -webkit-transform: translate3d(-0.5px, 0, 0);
   transform: translate3d(-0.5px, 0, 0);
 }

0.50%, 80% {
  -webkit-transform: translate3d(0.5px, 0, 0);
  transform: translate3d(0.5px, 0, 0);
}

30%, 50%, 70% {
  -webkit-transform: translate3d(-0.5px, 0, 0);
  transform: translate3d(-0.5px, 0, 0);
}

0.50%, 60% {
  -webkit-transform: translate3d(0.5px, 0, 0);
  transform: translate3d(0.5px, 0, 0);
}
}

Código para Tremer:

#ID{
    
    animation: treme 0.5s;
  animation-iteration-count: infinite;
}

@keyframes treme {
  0% {margin-left: 0;}
  25% {margin-left: 5px;}
  50% {margin-left: 0;}
  75% {margin-left: -5px;}
  100% {margin-left: 0;}
}

DICAS

Lembre-se sempre de nomear corretamente o ID de cada botão para que o código correspondente e certifique-se de que não tenha nenhum outro botão ou seção com o mesmo ID. Tomar essas precauções ajuda a garantir que seu projeto não fique travado ou que tenha mais animações do que o necessário.

Também é importante lembrar que existem muitos outros códigos CSS que podem ser usados nos mais diferentes tipos de sites, porém é importante que eles sejam usados apenas para ressaltar uma área que merece mais atenção do visitante e não no site inteiro.

Gostou do conteúdo? Comente aqui em baixo!