Seguro que has visto en un montón de páginas web que en su menú principal integran un botón con un estilo distinto al resto de los enlaces. Un botón que destaca sobre los demás componentes del menú. Es lo que llamamos un botón CTA o de llamada a la acción, puesto que nos invita a pulsar sobre él.  En este articulo veremos como crear uno y animarlo en Divi.

Paso 1. Preparar el menu

Puedes crear un menú nuevo para seguir el tutorial o crear un módulo menú  si no quieres modificar tu menú principal. En cualquier caso debemos activar la opción que nos permita aplicar clases CSS a los elementos de nuestro menú.

Así que navegamos hasta Apariencia > menús abrimos las opciones de pantalla y nos aseguramos de que esté activada la opción clases CSS. Fíjate en la captura que te adjunto.

Una vez tengamos esta opción activada ya podemos agregar clases CSS a los elementos del menú. Agregar la clase CSS permitirá cambiar el estilo y personalizar el comportamiento de uno o varios elementos (enlaces) de nuestro menú.

Así que, teniendo en pantalla nuestro menú (ya sea el menú principal u otro que apliquemos a un módulo), pulsamos en la flechita que abre el enlace que queremos convertir en botón CTA y, en el campo clase CSS, escribimos la clase, que será cta-menu. guardamos a continuación el menú para que actualice los cambios.

Una vez tengamos esta opción activada ya podemos agregar clases CSS a los elementos del menú. Agregar la clase CSS permitirá cambiar el estilo y personalizar el comportamiento de uno o varios elementos (enlaces) de nuestro menú.

Así que, teniendo en pantalla nuestro menú (ya sea el menú principal u otro que apliquemos a un módulo), pulsamos en la flechita que abre el enlace que queremos convertir en botón CTA y, en el campo clase CSS, escribimos la clase, que será cta-menu guardamos a continuación el menú para que actualice los cambios.

Ya que hemos asignado la clase CSS a nuestro botón en el menú. Ahora debemos crear el código. Vamos a ponerlo en el panel CSS de las opciones de Divi. Puedes hacerlo desde Divi > opciones del tema .

Este es el código que debes incluir.

.cta-menu a {
	border: 2px solid #fff;
    padding: 10px !important;
	border-radius: 25px;
    background: #ffcd02;
    color: #fff !important;
}
    
.cta-menu a:hover {
	border: 2px solid #ffcd02;
    background: #ef5555;
    color: #000 !important;
    opacity: 1 !important;
}

Para agregar una animación al botón para que cambie al situar el ratón encima agrega también el siguiente código.

cta-menu a {
	border: 2px solid #fff;
    padding: 10px !important;
	border-radius: 25px;
    background: #ffcd02;
    color: #fff !important;
	animation-name: pulse;
animation-duration: 3000ms;
transform-origin:70% 70%;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes pulse {
0% { transform: scale(1); }
30% { transform: scale(1); }
40% { transform: scale(1.08); }
50% { transform: scale(1); }
60% { transform: scale(1); }
70% { transform: scale(1.05); }
80% { transform: scale(1); }
100% { transform: scale(1); }

}
    
.cta-menu a:hover {
	border: 2px solid #ffcd02;
    background: #ef5555;
    color: #000 !important;
    opacity: 1 !important;
	animation: none;
}

En el siguiente vídeo puedes ver todo el procedimiento con mas detalle.