Aunque las líneas de diseño del tema y los elementos del constructor Divi han sido tildados por algunos usuarios de “muy simples” o de tener “apariencia demasiado moderna”, los botones Divi animados de llamada a la acción son distintivos y funcionales.
Automáticamente se ajustan al tamaño de letra y el espacio donde son insertados procurando siempre lucir alineados y legibles, pero su aplicación a veces se ve limitada por el constructor Divi que impide la versatilidad y el poder insertarlos justo donde se desean.
En este tutorial queremos compartir como convertir cualquier enlace en un botón Divi de llamada a la acción en entradas y páginas sin usar el constructor.
Código CSS para crear un botón Divi versátil
Primero hay que aclarar que se necesita tener instalado el tema o el constructor Divi, pues este CSS reutiliza y hace llamados a clases y código que son empleados el propio tema y el constructor.
Hay dos modelos de botones animados de Divi. El primero es el típico botón con fondo completo y texto de un color contrastante y el otro es un botón con fondo transparente donde el borde y el texto tienen el mismo color.
Al pasar el cursor por encima o al hacer clic, el hover (animación) cambiará el color del botón y aparecerá una flecha.
Para usar los códigos CSS hay que ingresar al panel de administración de WordPress hacer clic en el apartado “Apariencia” y luego en “Personalizar”. En la nueva página hacer clic en “CSS personalizado” y pegar el código.
/* Botón completo de color rojo*/
.boton-rojo {
font-size: 20px;
font-weight: 500;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
padding: 8px 20px;
line-height: 1.7em;
background: transparent;
border: 2px solid;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-moz-transition: all 0.2s;
-webkit-transition: all 0.2s;
transition: all 0.2s;
position: relative;}
a.btn-red {
background-color: #be5555; /*Aquí se puede cambiar el color del fondo del botón Divi*/
border: 2px solid transparent;
color: #fff!important; /* Aquí se puede cambiar el color del texto del botón Divi */
font-weight: bold;}
a.btn-red:hover {
background: #8e3737; /* Cambia el color del hover del botón Divi*/
border: 2px solid transparent;
padding: 8px 34px 8px 14px !important;}
a.btn-red:after {
font-family: ‘ETmodules’;
font-size: 32px;
opacity: 0;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 32px;
line-height: 1em;
content: «\35»;
position: absolute;
margin-left: -1em;
-moz-transition: all 0.2s;
-webkit-transition: all 0.2s;
transition: all 0.2s;}
a.btn-red:hover:after {
opacity:1;
display: block!important;
font-family: ‘ETmodules’;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
right: 0px;
top: 5px;
margin-left: 0;}
/*Botón con fondo transparente */
.boton-conborde {
font-size: 20px;
font-weight: 500;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
padding: 8px 20px;
line-height: 1.7em;
background: transparent;
border: 2px solid;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-moz-transition: all 0.2s;
-webkit-transition: all 0.2s;
transition: all 0.2s;
position: relative;}
a.btn-white {
background-color: transparent;
border: 2px solid #8e3737; /* Aquí se cambia el borde el botón Divi*/
color: #8e3737!important; /* Aquí el color del texto del botón*/
font-weight: bold;}
a.btn-white:hover {
background: transparent;
border: 2px solid #8e3737; /* Aquí el color del borde en el hover*/
padding: 8px 34px 8px 14px !important;}
a.btn-white:after {
font-family: ‘ETmodules’;
font-size: 32px;
opacity: 0;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 32px;
line-height: 1em;
content: «\35»;
position: absolute;
margin-left: -1em;
-moz-transition: all 0.2s;
-webkit-transition: all 0.2s;
transition: all 0.2s;}
a.btn-white:hover:after {
opacity:1;
display: block!important;
font-family: ‘ETmodules’;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
right: 0px;
top: 5px;
margin-left: 0;}
El código tiene comentarios para identificar fácilmente donde personalizar los colores según el diseño del sitio.
Se pueden agregar los 2 códigos para tener los 2 tipos de botones. Hay que recordar guardar los cambios al finalizar.
Transformar un enlace en un botón Divi animado
Después de insertar los códigos CSS al tema, solo hay que crear un enlace y agregarle la clase CSS que corresponda al tipo de botón que se desea.
Para ello abrir a entrada o página en el editor de WordPress y crear el enlace.
Hacer clic en la pestaña “HTML” del editor y agregar la clase CSS al comienzo de la etiqueta del enlace despúes de la “a”. La clase CSS se encuentra al principio del código CSS que se agregó antes.
class=boton-rojo
Publicando los cambios los botones deberían ser visibles y funcionar.
Para más tutoriales, trucos y consejos para Divi haz clic aquí.
Accede a más tutoriales, trucos y consejos sobre Divi .
 Crear botones Divi sin usar el constructor){kind=link}