Como criar Botões de Alta Conversão no Elementor

Estilo de Botão 1

Fundo com gradient animado

				
					/* Seleciona o Botão Padrão */
selector .elementor-button {
    animation: animateBg 3s linear infinite;
    background-image: linear-gradient(100deg, #FF004D, #FF8200, #FF004D, #FF8200);
    background-size: 300% 100%;
    box-shadow: 0 5px 30px 5px rgba(0,0,0,0.2);
}

/* Seleciona o Botão de um formulário\ */
selector button[type=submit].elementor-button {
    animation: animateBg 3s linear infinite;
    background-image: linear-gradient(100deg, #FF004D, #FF8200, #FF004D, #FF8200);
    background-size: 300% 100%;
    box-shadow: 0 5px 30px 5px rgba(0,0,0,0.2);
}

/* Animação */
@keyframes animateBg {
        0% { background-position: 0 0; }
        100% { background-position: 100% 0; }
    }

Estilo de Botão 2

Efeito de Icone Animado

				
					selector span.elementor-button-icon {
    transform: rotate(45deg);
    transition: All 0.3s ease-in-out;
}
selector:hover span.elementor-button-icon {
    transform: rotate(0deg);
    transition: All 0.3s ease-in-out;
}
selector:hover svg {
    transform-origin: center center;
    animation: 1s infinite seta;
    transition: 0.3s ;
    
    
}
@keyframes seta {
    0%,100% {
        transform: translate(0,0)
    }
    
    50% { transform: translate(10px, 0px)}
    }

Estilo de Botão 3

Efeito de preenchimento animado

				
					selector .elementor-button {
    overflow: hidden;
}
selector .elementor-button:before{
    content:"";
    display: block;
    position: absolute;
    top:0px;
    left: 0px;
    right:0px;
    bottom:0px;
    width: 100%;
    height: 100%;
    transition: transform .45s cubic-bezier(.785,.135,.15,.86);
    z-index: -1;
    
    /* importante definir*/
    border-radius: 10px;
    background: #0006FF;
    
    /* Sentido da Animação - Horizontal*/
    transform: scaleX(0);
    transform-origin: right center;
    
    /* Sentido da Animação - vertical */
    /*transform: scaleY(0);
    transform-origin: bottom center;*/
    
}
selector .elementor-button:hover:before{
    content:"";
    transform: scale(1);
    
    /* Sentido da Animação - horizontal */
    transform-origin: left center;
    
    /* Sentido da Animação - vertical */
    /*transform-origin: top center;*/
    
}

Estilo de Botão 4

Efeito de movimento "Shaking"

				
					selector .elementor-button {
    animation: shaking 0.2s linear infinite;
    box-shadow: #FF8200 0px 0px 15px 2px;
}
selector .elementor-button:hover {
    box-shadow:
    #FF8200 0px 0px 15px 2px,
    #FF8200C7 0px 0px 30px 0px,
    #FF82008C 0px 0px 45px 0px;
}
@keyframes shaking {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(2deg); }
  50% { transform: rotate(0eg); }
  75% { transform: rotate(-2deg); }
  100% { transform: rotate(0deg); }
}