Como criar uma animação “flutuante” em CSS e utilizar em imagens e botões no Elementor.

Essa dica vai como resposta para o Henrique C R da comunidade Elementor Brasil no facebook, que queria criar um efeito “flutuante” em um item do Elementor, como na imagem abaixo:

Para fazer isso você vai precisar colar o seguinte código na página que você quer o efeito em : Configurações (aquela engrenagem pequena no canto inferior esquerdo da tela) > Avançado > Custom CSS

@keyframes float{
	0%,100%{
		box-shadow:0 5px 15px 0 rgba(0,0,0,.6);
		transform:translatey(0)
	}
	50%{
		box-shadow:0 25px 15px 0 rgba(0,0,0,.2);
		transform:translatey(-20px)
	}
}
.efeito-flutuante .elementor-button-wrapper a, .efeito-flutuante .elementor-image img {
     animation: float 6s ease-in-out infinite;
}

E logo após vai aplicar isso na widget desejada como uma imagem ou botão e escreva efeito-flutuante através da guia Avançado > Classe CSS.

Após isso a widget já estará com o efeito desejado.

IMPORTANTE: testado apenas em imagens e botões.

Comente o que achou do post, se teve dificuldade para fazer ou foi tranquilo.

Forte abraço e até a próxima!

Alan Rezende