image.png

Paso 1: Haz clic en la ventana CSS Personalizado y pega el siguiente código en la ventana emergente. Haz clic en guardar.

/*-----moving gradient on hover-----*/

.btn-hover-1 {
    background-image: linear-gradient(to right, #38b6ff 25%,  #cb6ce6 75%);
    transition: 0.5s;
    background-size: 250% auto;
    background-position: right;
}

.btn-hover-1:hover {
    background-position: left;
}

/*-----moving gradient on hover (END)-----*/

image.png

Paso 2: Haz clic en la sección o botón al que quieres agregar el efecto y, en el panel derecho, selecciona la pestaña Avanzado. Escribe el nombre de la clase personalizada (en este caso, btn-hover-1) en el campo Clase Personalizada. Presiona Enter.

image.png

Notarás que, al pasar el cursor sobre el botón, el color cambia gradualmente y se crea un efecto de degradado en movimiento.

Puedes agregar esta clase personalizada a botones, secciones, etc…

image.png

Nota: Si deseas cambiar los colores, edita los códigos HEX en las propiedades del degradado.

image.png

Paso 3 (más estilos, opcional):

Puedes experimentar con el estilo del degradado y la dirección para lograr diferentes efectos visuales.