En esta publicación, le mostraré 5 diseños creativos de módulos de botones Divi que puede lograr fácilmente con el Módulo de botones de Divi. El módulo de botones es uno de los más populares de todos los módulos Divi porque los botones son muy importantes para llevar a los visitantes a los objetivos deseados en un sitio web. Por lo tanto, es muy importante que nosotros, como diseñadores y desarrolladores, hagamos que estos botones sean atractivos y llamativos.
¡Vamos a profundizar en!
Aquí hay un vistazo rápido a los botones que construiremos en este tutorial.
Vayamos al tutorial, ¿de acuerdo?
Lo que necesitas para empezar
Para comenzar, deberá hacer lo siguiente:
- Si aún no lo has hecho, instala y activa el tema Divi .
- Cree una nueva página en WordPress y use Divi Builder para editar la página en la parte delantera (constructor visual).
- Elija la opción «Construir desde cero».
Después de eso, tendrás un lienzo en blanco para comenzar a diseñar en Divi.
Para comenzar, cree una nueva sección con una fila de una columna y agregue un módulo de botón a la fila.
Luego cambie el texto de contenido predeterminado del botón para que diga «Comenzar» (o lo que quiera en realidad).
Ahora es el momento de saltar a la configuración de diseño y actualizar lo siguiente:
Usar estilos personalizados para el botón: SÍ
Color del texto del botón: #ffffff
Color de fondo del botón: #324376
Ancho del borde: 0px
Espaciado entre letras del botón: 0.2em
Fuente del botón: Fira Sans
Estilo de fuente: TT (mayúsculas), U (subrayado)
Color de subrayado: rgba (255,255,255,0.2)
Estilo de subrayado: doble
Icono de botón: vea la captura de pantalla
Color del icono de botón: #ff4751
Ubicación del icono de botón: Izquierda
Relleno personalizado: 40 px a la izquierda, 20 px a la derecha
Sombra de cuadro: ver captura de pantalla
Posición horizontal de sombra de cuadro: 22 px
Posición vertical de sombra de cuadro: 0 px
Color de sombra: #ff4751
(El relleno izquierdo personalizado de 40 px crea un espacio fijo que se llena con la sombra del cuadro para que quede al ras del icono del botón de flecha izquierda).
Dado que la sombra del cuadro izquierdo está al mismo nivel que el inicio del icono de la flecha, esto crea un bonito efecto de borde de flecha. Si por algún motivo no queda al ras del icono, puede ajustar la posición horizontal según sea necesario. La belleza de este diseño es que el borde de la flecha izquierda permanecerá en su lugar incluso cuando se agreguen diferentes cantidades de texto de botón.
Aquí esta el resultado final.
Este estilo de botón siguiente tiene una sensación más técnica y minimalista. Las líneas se crean utilizando una sombra de cuadro y un degradado de fondo separados por un borde transparente. También agregué un efecto de desplazamiento que mueve la sombra del cuadro hacia la derecha, lo que a su vez mueve la línea inferior ligeramente hacia la derecha para una interacción sutil.
Para comenzar, cree una nueva sección con una fila de una columna y agregue un módulo de botón a la fila.
Actualiza el contenido del texto del botón a lo que quieras. Dejo el «clic aquí» predeterminado para este ejemplo. Luego actualice la configuración de diseño de la siguiente manera:
- Usar estilos personalizados para el botón: SÍ
- Color del texto del botón: #3b7986
- Degradado de fondo del botón Color izquierdo: rgba(255,255,255,0)
- Degradado de fondo del botón Color derecho: #3b7986
- Dirección del gradiente: 180 grados
- Posición inicial: 96%
- Posición final: 0%
- Ancho del borde del botón: 10px
- Color del borde del botón: rgba(0,0,0,0)
- Radio del borde del botón: 0px
- Espaciado entre letras de botones: 6px
- Fuente del botón: Exo 2
- Peso de fuente: Negrita
- Estilo de fuente: Tt (en versalitas)
- Icono de botón: Flecha derecha (ver captura de pantalla)
- Mostrar solo el ícono al pasar el mouse por el botón: NO
- Relleno personalizado: 0px inferior
- Sombra de caja: ver captura de pantalla
- Posición horizontal de la sombra del cuadro: -15px
- Posición vertical de la sombra del cuadro: 15px
- Fuerza de propagación de la sombra del cuadro: -13px
- Color de sombra: #3b7986
Es posible que también deba establecer el color de fondo en #ffffff al pasar el mouse, ya que esta es la configuración predeterminada para el botón.
La clave de este diseño es el degradado de color de fondo y la sombra del cuadro. Al establecer el punto de inicio del degradado de color de fondo en 96 %, se crea una línea de 4 % de ancho en la parte inferior del botón. Luego, una vez que colocamos y coloreamos la sombra del cuadro, tenemos otro elemento de línea que envuelve el botón muy bien. Además, el ícono de la flecha hacia la derecha también funciona bien con los elementos de diseño de líneas.
Aquí está el diseño final.
Para agregar el efecto de desplazamiento que mueve la sombra del cuadro, vuelva a la configuración de diseño y desplace el cursor sobre la opción «Posición horizontal de la sombra del cuadro». Verá un icono de flecha emergente justo al lado del texto. Haga clic en él para abrir las opciones de desplazamiento para esa configuración en particular.
Luego haga clic en la pestaña flotante y cambie el valor a 13px.
Verá el efecto de desplazamiento en una vista previa en el generador visual.
Así es como se ve el efecto de desplazamiento:
Este diseño de botón siguiente agrega una sombra de cuadro para enmarcar el icono del botón derecho que permanece en una posición absoluta. Al pasar el mouse, el botón se extiende hacia la derecha creando el efecto de que está tirando de una pestaña.
Para crear el botón, primero, cree una nueva sección con una fila de una columna y luego agregue un módulo de botón a la fila.
Abra la configuración del módulo de botones y actualice el texto del botón en la pestaña de contenido a lo que desee (voy a usar el texto «Más información»).
Luego salta a la pestaña de diseño y actualiza lo siguiente:
Usar estilos personalizados para el botón: SÍ
Color del texto del botón: #ffffff
Color del degradado de fondo del
botón a la izquierda: #7D80DA Color del degradado de fondo del botón a la derecha: #8EEDF7
Dirección del degradado: 90 grados
Ancho del borde del botón: 0px
Radio del borde del botón: 10px
Espaciado entre letras del botón: 1px
Fuente del botón : Fuente Sans Pro
Peso de fuente: Negrita
Estilo de fuente: TT
Icono de botón: Ver captura de pantalla
Color de icono de botón: #ffffff Relleno
personalizado: 1em a la izquierda, 2,5em a la derecha
Sombra de cuadro: Ver captura de pantalla
Posición horizontal de sombra de cuadro: -35px
Posición vertical de sombra de cuadro: 0px
Color de sombra: #7d80da
La clave de este diseño es la sombra del cuadro a la derecha que enmarcará el ícono. Pero en este momento, el ícono debe colocarse para que quepa dentro del área de degradado. Para hacer esto, necesitamos agregar algo de CSS personalizado.
Vaya a la pestaña Avanzado e ingrese el siguiente CSS dentro del cuadro de entrada Después:
|
01
02
|
position: absolute;right: 5%; |
Este CSS apunta a la ubicación del ícono y le otorga una posición absoluta al 5 % del borde derecho del botón.
Echa un vistazo al diseño hasta ahora.
Ahora, para agregar el efecto de desplazamiento, solo necesitamos actualizar la opción de relleno derecha debajo de la pestaña de desplazamiento. Para hacer esto, abra la configuración del botón y abra las opciones de desplazamiento pasando el cursor sobre el elemento de relleno personalizado y haciendo clic en el icono del cursor que aparece. Luego seleccione la pestaña flotante e ingrese lo siguiente:
Acolchado personalizado: 4em Derecha
Ahora veamos el resultado final.
Para el próximo diseño, vamos a transformar una imagen/icono de círculo en un botón en el que se puede hacer clic con un efecto de desplazamiento genial que muestra una breve llamada a la acción.
Para comenzar, cree una nueva sección con una fila de una columna y agregue un módulo de botón a la fila.
Luego abra la configuración de diseño del botón. En la pestaña de contenido, agregue la palabra «Ir» para el texto del botón.
Luego vaya a la configuración de diseño y seleccione usar los estilos de botones personalizados. Primero agregue la imagen del círculo como imagen de fondo para el botón. Para que este diseño funcione, asegúrese de usar una imagen png de un logotipo o icono que sea un círculo perfecto y que las dimensiones de la imagen sean del mismo alto y ancho. La imagen que estoy usando es un png de 118 px por 118 px. Consíguelo aquí si quieres:
Una vez que agregue la imagen de fondo, asegúrese de que el tamaño de la imagen de fondo esté configurado en «Tamaño real». Esto asegurará que la imagen conserve sus dimensiones originales (118 px por 118 px).
A continuación, queremos cambiar el tamaño de nuestro botón para que tenga las dimensiones exactas de nuestra imagen circular. Para hacer esto, vaya a la pestaña Avanzado e ingrese el siguiente CSS personalizado en el Elemento principal:
|
01
02
03
04
|
width: 118px;height: 118px;line-height: 118px !important;text-align: center; |
Tenga en cuenta que el css establece el ancho, el alto y el alto de línea en el mismo valor de 118 px. Este es el mismo ancho y alto de nuestra imagen. Ahora la imagen encaja perfectamente en el botón. La altura de la línea se establece en 118 px para que el texto dentro del botón esté centrado verticalmente dentro del botón (aún no está perfectamente centrado porque todavía hay algo de relleno del que debemos deshacernos que lo está tirando). Y text-align: center se asegura de que el texto dentro del botón permanezca centrado incluso cuando el módulo del botón está alineado a la izquierda o a la derecha.
Ahora todo lo que tenemos que hacer es terminar con algunas configuraciones de diseño que completarán el diseño. Vaya a la pestaña de diseño y actualice lo siguiente:
Color del texto del botón (predeterminado): rgba(0,0,0,0)
Color del texto del botón (desplazamiento): #ffffff
(Esto oculta el texto del botón de forma predeterminada y lo muestra en blanco al pasar el mouse)
Color de fondo (predeterminado): #121212
Color de fondo (desplazamiento): #da00f2
(Esto muestra un fondo negro detrás de la imagen de forma predeterminada y luego un color de fondo rosa brillante al pasar el mouse).
Ancho del borde del botón: 0px
Radio del botón: 50%;
(Configurar el radio del botón al 50 % cambiará el botón a una forma de círculo porque la altura y el ancho del botón se configuraron en 118 px en CSS personalizado).
Fuente del botón: Poppins
Peso de la fuente: Negrita
Estilo de fuente: TT
Mostrar icono de botón: NO (si tiene un icono de botón, el texto centrado no aparecerá)
Relleno personalizado: 0px arriba, 0px abajo
(Es importante eliminar el relleno superior e inferior para que la altura de línea que establezcamos en css personalizado haga que el texto esté centrado verticalmente).
Sombra de cuadro: vea la captura de pantalla
Posición vertical de sombra de cuadro: 0px
Color de sombra (predeterminado): rgba(0,0,0,0)
Color de sombra (hover): rgba(0,0,0,0.68)
(Esto mostrará una ligera sombra de cuadro alrededor del círculo al pasar el mouse para obtener un efecto emergente adicional).
Aquí está el diseño final con el efecto de desplazamiento.
Este último diseño es bastante sencillo y fácil de hacer. Todo lo que se necesita es un uso creativo de los colores degradados de fondo y los colores de las sombras de los cuadros. El efecto de desplazamiento simplemente aumenta el tamaño de la sombra del cuadro para dar más efecto de brillo.
Para comenzar, cree una nueva sección con una fila de una columna y agregue un módulo de botón a la fila. Antes de actualizar el módulo de botones, abra la configuración de la sección y dele a la sección un color de fondo oscuro (#333333).
Ahora abra la configuración del botón.
Puede dejar el texto del botón predeterminado «Haga clic aquí». Luego actualice la siguiente configuración de diseño:
Alineación del botón: Centro
Usar estilos personalizados para el botón: SÍ
Tamaño del texto del botón: 18 px
Color del texto del botón: #ffffff
Degradado de fondo del botón Color izquierdo: #00ff8c
Degradado de fondo del botón Color derecho: #15c39a
Tipo de degradado: Radial
Dirección radial: Centro
Posición final: 75 %
(Configurar el tipo de degradado en Radial le dará al degradado una forma de círculo que se expande hacia afuera. Asegúrese de que el color más claro se muestre en el medio del degradado para crear el efecto de brillo).
Ancho del borde del botón: 0 px
Radio del borde del botón: 100 px
Espaciado entre letras del botón (predeterminado): 4 px
Espaciado entre letras del botón (al pasar el mouse): 5 px
(Al aumentar el espacio entre letras al pasar el mouse, se expandirá ligeramente todo el botón para obtener un efecto agradable)
Peso de fuente: Ultra negrita
Estilo de fuente: I, TT
Icono de botón: flecha derecha (ver captura de pantalla)
Relleno personalizado: 20 px arriba, 20 px abajo, 30 px a la izquierda, 50 px a la derecha
(necesita más relleno derecho para tener en cuenta el icono del botón de flecha derecha)
Sombra de cuadro: vea la captura de pantalla
Posición vertical de la sombra de cuadro: 0px
Intensidad de desenfoque de sombra de cuadro (predeterminado): 64 px
Intensidad de desenfoque de sombra de cuadro (pasar el cursor): 100 px
Fuerza de extensión de sombra de cuadro: -12 px
Color de sombra: rgba (0,255,140,0.66)
(La sombra del cuadro se agrega al efecto de brillo cuando hace coincidir el color de la sombra con el color del botón. Aumentar la intensidad del desenfoque al pasar el mouse también magnificará el brillo del botón)
Echa un vistazo al diseño final con el efecto de desplazamiento.
Para obtener más información sobre la inspiración en los estilos de botones, consulte algunos de estos otros artículos:
- Cómo crear un botón de fuente de icono con Divi
- Diseñe un diseño Divi único de pantalla completa con un botón de desplazamiento animado
- Cómo diseñar sus botones sociales de Monarch para que coincidan con el diseño de su sitio
- 7 claves para crear un botón de suscripción irresistible
Pensamientos finales
¡Espero que estos ejemplos te hayan inspirado para maximizar el módulo de botones Divi de nuevas formas creativas! Debido a que una llamada a la acción es tan importante para su sitio web, siempre es bueno tener una variedad de ideas en nuestra caja de herramientas para crear algunas opciones de botón únicas. ¡Siéntase libre de usar estas ideas para crear sus propios estilos de botones increíbles!
Espero escuchar de usted en los comentarios.
¡Salud!