Para crear un menú de botones de iconos, o íconos en forma de botón, con Divi necesitamos los siguientes recursos:

• Cómo Instalar Divi. En esta guía te explico paso a paso cómo instalar Divi en WordPress y activar la licencia en caso de que seas nuevo con Divi.
• Módulo Iconos de Divi.

Cómo hacer botones de íconos con Divi

Los botones de iconos se han vuelto esenciales en el mundo del diseño web. Los íconos brindan llamadas a la acción visuales, concisas, que funcionan muy bien para dispositivos móviles porque no ocupan mucho espacio.

También funcionan bien como botones emergentes que los usuarios reconocen intuitivamente sin necesidad de texto.

En el tutorial de hoy, te muestro cómo diseñar botones de iconos con Divi.

Crear un botón de icono en Divi es bastante simple y divertido de hacer. Con el módulo de iconos, podemos elegir entre cientos de iconos y usar innumerables opciones de diseño integradas de Divi Builder para crear casi cualquier tipo de botón de icono que se te ocurra.

Con suerte, esta guía te ayudará a comenzar a crear algunos botones de íconos increíbles para tu próximo proyecto.

Hacer un icono perfectamente cuadrado

La gran colección de íconos disponibles para usar en el módulo Icon incluye íconos Divi e íconos Fontawesome. Sin embargo, no todos los iconos tendrán la misma altura y ancho. Esto hace que sea un poco más difícil determinar el ancho y el alto exactos del botón del icono.

Podríamos hacer ajustes en el relleno para obtener las dimensiones correctas, pero esto es un poco engorroso y podría limitar algunas de las opciones del ícono. Por ejemplo, agregar relleno al módulo de íconos creará espacio alrededor del ícono. Por lo tanto, si creamos una opción de flotar o hover para cambiar el color del ícono al pasar el mouse, el color del ícono no cambiará al pasar el mouse sobre el relleno alrededor del ícono. Cambiaría solo al pasar el mouse sobre el ícono mismo.

Para crear un botón perfectamente cuadrado que cambie el ícono al pasar el mouse, podemos agregar un CSS personalizado para establecer una altura y un ancho para el ícono, así como centrarlo usando la propiedad CSS Flex.

• CSS Personalizado > Icon element:

height: 90px;
width: 90px;
display: flex;
align-items: center;
justify-content: center;

Ahora el botón del ícono tendrá una altura y un ancho iguales, lo que lo convertirá en un cuadrado perfecto.

Además, la propiedad flex alinea el icono en el centro del módulo. Esto te permite cambiar el tamaño del icono dentro del módulo con facilidad.

Cómo hacer un menú de botones de íconos

Una tendencia popular es usar íconos para crear un menú de íconos que generalmente consta de varios botones colocados uno al lado del otro. Para hacer esto podemos usar la propiedad flex.

A la fila que contiene el menú de botones tenemos que asignarle el siguiente CSS para que los botones se ubiquen uno junto al otro y no uno debajo del otro, que es la forma predeterminada.

• CSS Personalizado > Elemento principal:

display:flex;
align-items:center;

Ahora, cada vez que agreguemos nuevos botones de iconos, aparecerán uno al lado del otro.

Cambiar propiedades al pasar por arriba

Es difícil hablar sobre el diseño de botones de iconos sin mencionar los efectos de hover o flotar. Son demasiado divertidos para ignorarlos. No te aburriré con todas las posibilidades disponibles con las opciones de desplazamiento integradas de Divi, pero mencionaré algunas para que fluyan esos jugos creativos.

Cambiar los colores del botón cuando pasamos por encima de este es un efecto popular y efectivo. Por ejemplo, podemos cambiar el color de fondo y el color del ícono simultáneamente cuando el usuario pasa el mouse sobre el botón.

Para hacer esto, abrimos la configuración del módulo de iconos y activamos las opciones de Flotar para el color de fondo y elegimos un color diferente para el estado de flotar. Luego puedes hacer lo mismo con el icono. En este ejemplo, estamos cambiando el color de fondo y también cambiando el icono.

Cambiar el icono al pasar por arriba

Otro efecto de desplazamiento que te puede gustar es cambiar el ícono a uno completamente diferente. Para hacer esto, puedes elegir un icono diferente para el estado de Flotar en la pestaña Contenido.

Escalar el botón de icono al pasar por arriba

Un efecto de flotar que es difícil de ignorar es el efecto de escala. Esto hace que el botón del icono se expanda o aumente de tamaño cuando pasamos el mouse por arriba.

La mejor manera de agregar este tipo de efecto de flotar es usar las opciones de Transformación de Divi. Esto permitirá que el botón crezca sin afectar los elementos que lo rodean.

Rotar el botón de icono al pasar por arriba

Girar cosas al pasar el mouse siempre es una interacción divertida. Para rotar un botón de icono al pasar el mouse podemos usar la opción Transformar > Rotar.

Pero antes de eso, hagamos que el botón sea circular para que solo el icono parezca girar. Para hacer que el ícono sea circular, suponiendo que el botón sea un cuadrado, simplemente actualizamos la configuración de las esquinas redondeadas al 50% en las cuatro esquinas.

Códigos utilizados en el Video para hacer botones de íconos

A continuación paso a detallar los códigos y otros valores utilizados en el video para que puedas directamente copiar y pegar.

Botón cuadrado

Para crear un botón perfectamente cuadrado podemos agregar un CSS personalizado para establecer una altura y un ancho para el ícono, así como centrarlo usando la propiedad CSS Flex.

• CSS Personalizado > Icon element:

height: 90px;
width: 90px;
display: flex;
align-items: center;
justify-content: center;

Fila que contiene el menú de botones

A la fila que contiene el menú de botones tenemos que asignarle el siguiente CSS para que los botones se ubiquen uno junto al otro y no uno debajo del otro, que es la forma predeterminada.

• CSS Personalizado > Elemento principal:

display:flex;
align-items:center;

Saber diseñar botones de iconos para un sitio web es fundamental. Y, como hemos visto en este tutorial, no es tan difícil con Divi. El módulo de iconos de Divi tiene un montón de opciones integradas que abren la puerta a diseños creativos de botones de iconos.

Con suerte, las técnicas de este artículo te ayudarán a darle algo de la magia a tus propios diseños de botones de íconos.

Espero saber que te perece en los comentarios.