Botão Pulsar no Elementor: Como fazer o botão de uma Landing Page ou Site ficar PULSANDO para chamar atenção dos visitantes.
Botão Pulsar no Elementor: CÓDIGO CSS
Primeiramente, lembre de colocar o ID do Botão.
ESTA USANDO O ELEMENTOR PRO? USE ESSE CÓDIGO.
Caminho: Configurações > Avançado > CSS Personalizado ou Custom CSS.
#bt_pulse {-webkit-animation: pulse 1.0s infinite;}
#bt_pulse:hover {-webkit-animation: none;}
@-webkit-keyframes pulse {0% {@include transform(scale(.9)); } 70% {@include transform(scale(1));
box-shadow: 0 0 0 50px rgba(#5a99d4, 0);} 100% {@include transform(scale(.9)); box-shadow: 0 0 0 0 rgba(#5a99d4, 0);}}
ESTA USANDO O ELEMENTOR FREE? USE ESSE CÓDIGO DENTRO DE UM BOX HTML
<style type="text/css">
#bt_pulse{-webkit-animation: pulse 1.0s infinite;}
#bt_pulse:hover {-webkit-animation: none;}
@-webkit-keyframes pulse {0% {@include transform(scale(.9)); } 70% {@include transform(scale(1));
box-shadow: 0 0 0 50px rgba(#5a99d4, 0);} 100% {@include transform(scale(.9)); box-shadow: 0 0 0 0 rgba(#5a99d4, 0);}}
</style>
6 Comentários
Excelente tutorial. Obrigada pelo conteúdo!
Valeu, Daniele. seja muito bem-vinda!
Funciona, quando estamos editando no elementor (no meu caso o free). Mas ao gravar e visualizar a página, nada acontece. Teste feito no chrome, firefox, edge. Em todos ao visualizar o código da página o script está lá.
Coloque um efeito qualquer ao passar o mouse. Isso fará com que o script CSS fique em prioridade. (funcionou para outros que estavam com o mesmo problema.)
Dica Sensacional. Salvou aqui! Gratiluzz