5 Modelos creativos Divide los módulos de botones y la forma de hacerlos

En esta publicación, le mostraré 5 modelos creativos de módulos Divon Butt que puede hacer fácilmente con el módulo de división. El módulo de botones es uno de los módulos Divi más populares, porque los botones son muy importantes para llevar a los visitantes a los objetivos deseados a lo largo de un sitio web. Por lo tanto, es muy importante para nosotros, diseñadores y desarrolladores, hacer estos botones atractivos y atractivos. ¡Vamos a cavar! Tira la vista con un vistazo rápido a los botones que construiremos en este tutorial. 1. Botón de flecha con tumba izquierda

2. Botón de línea de mudanza

3. Dibujar el botón de pestaña

4. El botón con el logotipo del círculo

5. Botón de brillo

Pasemos al tutorial, ¿no? Qué necesitas para empezar

Para comenzar, deberá hacer lo siguiente:
Si aún no lo ha hecho, instale y active el tema de Div.
Cree una nueva página en WordPress y use Divi Builder para editar la página principal (Visual Builder).
Elija la opción “Construir desde cero”.
Después de eso, tendrá un lienzo vacío para comenzar a diseñar en el Div. 5 modelos de botones de división y formas de hacerlos 1. Botón de borde con mano izquierda

Para comenzar, cree una nueva sección con una fila con una columna y agregue un botón en una fila.

Luego cambie el texto del contenido predeterminado del botón para leer “Inicio” (o lo que sea que realmente).

Ahora es el momento de cambiar a la configuración de diseño y actualizar lo siguiente: Use estilos personalizados para el botón: Sí, el color de texto del botón: #FFFFFF Color del botón: # 324376 Ancho: 0 PX Distancia entre letras y botones: 0.2em Font Botón: Fira Sans Font Style: TT (Eppercase), U (subrayado) Color subrayado: RGBA (255.255.25.0.2) Estilo de subrayado: botón de icono doble: consulte el icono de color de captura de pantalla: # FF4751 Icono de ubicación: Izquierda. Izquierda, izquierda, 20 PX Box Right Box Sombra: Ver captura de pantalla Posicera horizontal Posicion: 22 PX Box Sombra Posición vertical: 0px Color de sombra: # FF4751 (el forro izquierdo personalizado crea un espacio fijo que se llena con la sombra de la caja para soportar al mismo nivel que el icono del botón de flecha con la izquierda.)
Debido a que la sombra de la caja a la izquierda está al mismo nivel que el comienzo del icono de flecha, esto crea un hermoso borde de flecha. Si, por cierta razón, no está al mismo nivel que el 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 posición incluso cuando agrega diferentes cantidades de texto del botón.

Aquí esta el resultado final.
2. Botón de línea de mudanza

El siguiente estilo de botón tiene una apariencia más técnica y minimalista. Las líneas se crean utilizando una sombra de la caja y un gradiente de fondo separado de un borde transparente. También agregué un efecto de desplazamiento que mueve la sombra de la caja hacia la derecha, que a su vez mueve el resultado final hacia la derecha para una interacción sutil. Para comenzar, cree una nueva sección con una fila con una columna y agregue un botón en una fila. Actualice el contenido de texto del botón a lo que desee. Dejé “hacer clic aquí” de forma predeterminada para este ejemplo. Luego actualice la configuración de diseño de la siguiente manera: use estilos personalizados para el botón: Sí

El color del texto del botón: # 3B7986
Botón de jardinería de color izquierdo: RGBA (255,255,255.0)
Botón de fondo de color derecho: # 3B7986
Dirección de gradiente: 180 grados
Posición inicial: 96%
Posición final: 0%
El ancho del nudo del botón: 10 px
El color del marco del botón: RGBA (0.0,0,0)
El rasgo de botón de botón: 0 px
Distancia entre letras y botones: 6 PX
Botón de fuente: EXO 2
Peso de fuente: en negrita
Estilo de fuente: TT (pequeño mayúscula)
Icono del botón: flecha derecha (ver captura de pantalla)
Muestre el icono solo en el flotador para el botón: no
Revestimiento personalizado: 0px hacia abajo
Box Shadow: Ver captura de pantalla
Posición horizontal de la sombra de la caja: -15px
Box Shadow Posoton vertical: 15 PX
Poder de extender la sombra de la caja: -13px
Shadow Color: # 3B7986
Es posible que deba establecer el color de fondo en #FFFFF y Hover, ya que este es el botón predeterminado. La clave de este diseño es el gradiente de color de fondo y la sombra de la caja. Al establecer el gradiente de fondo, el punto de partida al 96%, se crea una línea con un ancho del 4% en la parte inferior del botón. Luego, una vez que colocamos y coloreamos la sombra de la caja, tenemos otro elemento lineal que envuelve el botón maravillosamente. Además, el icono de flecha derecho funciona bien con los elementos de diseño de línea. Aquí está el diseño final. Para agregar el efecto de movimiento que mueve la sombra de la caja, regresa a la configuración de diseño y atraviesa la “posición horizontal de la sombra de la caja”. Verá un icono de flecha emergente justo al lado del texto. Haga clic para abrir las opciones de viaje para esa configuración.
Luego haga clic en la pestaña Hover y cambie el valor a 13 PX. Verá el efecto de desplazamiento previo en el generador visual.

Así es como se ve el efecto flotante:

3. Dibujar el botón de pestaña

Este siguiente diseño de botón agrega una sombra de la caja para que se ajuste al icono del botón derecho que permanece en una posición absoluta. Cuando viaja, el botón se extiende hacia la derecha, creando el efecto que está tirando de una pestaña. Para crear el botón, primero, cree una nueva sección con una fila con una columna y luego agregue un botón en una fila. Abra la configuración del módulo de botón y actualice el texto del botón en la pestaña contenida para lo que desee (usaré el texto “aprender más”).

Luego pase a la pestaña Diseño y actualice lo siguiente: Use estilos personalizados para el botón: Sí, el color del texto del botón: #FFFFFF Botón del sótano Color izquierdo: # 7D80DA Horas correctas Graderifient Ancho: 0 PX Botón Chenar Raza: 10 PX Distancia entre letras y botones: 1 PX Botón de fuente: Fuente Sans Pro Font Peso: Bold Font Estilo: TT Botón icono: Consulte Captura de pantalla icono de color: #FFFFF Custom Lining: 1em izquierda, 2, 2, 5EM Box Box Sombra: Vea la captura de pantalla de la sombra de la caja: -35px Sombra Posición vertical: 0px Color de sombra: # 7d80dacheia Este diseño es la sombra del cuadro derecho que se ajustará al icono. Pero en este momento el ícono debe estar posicionado para caber en el área de gradiente. Para hacer esto, necesitamos agregar algunos CSS personalizados. Vaya a la pestaña avanzada e ingrese el siguiente CSS en el cuadro de entrada posterior: Posición: Absoluto;

Derecho: 5%;

Este CSS está dirigido a la ubicación del icono y le da una posición absoluta al 5% en comparación con el borde derecho del botón.

Revise su diseño hasta ahora.


Ahora, para agregar el efecto de Hover, solo tenemos que actualizar la opción de llenado correcto en la pestaña Hover. Para hacer esto, abra la configuración del botón y abra las opciones de viaje moviéndose en el elemento de llenado personalizado y haciendo clic en el icono del cursor. Luego seleccione la pestaña con el mouse e ingrese lo siguiente:
Revestimiento personalizado: 4em derecho
Ahora, verifiquemos el resultado final.

4. El botón con el logotipo del círculo

Para el siguiente diseño, convertiremos un icono / imagen del círculo en un botón que se puede hacer clic con un efecto de flotación en frío que muestra un breve impulso a la acción. Para comenzar las cosas, cree una nueva sección con una fila con una columna y agregue un botón en una fila. Luego abra la configuración de diseño de botones. En la pestaña Contenido, agregue la palabra “Go” 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 proyecto funcione, asegúrese de usar una imagen PNG de un logotipo o icono que sea un círculo perfecto y que el tamaño de la imagen esté a la misma altura y ancho. La imagen que uso es un PNG que tiene 118px en 118px. Tómelo aquí si quieres:
Después de agregar 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 con 118 PX).

Entonces queremos aumentar nuestro botón para que sean las dimensiones exactas de nuestra imagen círculo. Para hacer esto, pase a la pestaña avanzada e ingrese los siguientes CSS personalizados en el elemento principal: Ancho: 118px;

Altura: 118px;

Línea de altura: 118px! IMPORTANTE;

Text-Align: Center;

Observe que CSS establece el ancho, la altura y la altura de la línea, todo al mismo valor de 118 PX.Este es el mismo ancho y altura de nuestra imagen.Ahora la imagen encaja perfectamente en el botón.La altura de la línea se establece en 118 PX, de modo que el texto dentro del botón se centra verticalmente dentro del botón (aún no está perfectamente centrado, porque todavía hay un cierto relleno para escapar, arrojándolo).Y alineación del texto: el centro asegura que el texto dentro del botón permanezca centrado incluso cuando el módulo del botón está alineado hacia la izquierda o la derecha.

Ahora todo lo que tenemos que hacer es terminar con algunas configuraciones de diseño que completarán el diseño. Acceda a la pestaña de diseño y actualice lo siguiente: Botón de color de texto (predeterminado): RGBA (0.0,0,0) el texto del texto del botón (desplazamiento): #ffffff (esto predeterminado el texto del botón y lo muestra en White) Color de fondo (predeterminado): # 121212 El color del fondo (flotadores): # da00f2 (este predeterminado es un fondo negro detrás de la imagen y luego un color rosa brillante). El ancho del botón: 0 PX Button Ray: 50 %; (Configurar el botón en el botón a 50% cambiará el botón en forma de círculo porque la altura y el ancho del botón se han establecido en 118 PX en CSS personalizado). El icono del botón: no (si tiene un icono de botón arrojará el texto centrado) Reiniciar personalizado: 0 px hacia arriba, 0 px hacia abajo (es importante eliminar el revestimiento superior e inferior, de modo que la altura de la línea que colocamos CSS Personalizó el texto centrado verticalmente.) Sombra de caja: vea la captura de pantalla del cuadro Sombra Sombra Posición vertical: 0px Color de sombra (predeterminado): RGBA (0.0,0,0) sombra (flotante): RGBA (0.0,0,68) (esto Mostrará una ligera sombra de la caja alrededor del círculo en la carrera por un efecto emergente adicional). Aquí está el diseño final con efecto flotante.
5. Botón de brillo
Este último diseño es bastante simple y simple de hacer. Solo se necesita un uso creativo de los colores y tonos de gradiente de fondo de la caja. El efecto flotante simplemente aumenta el tamaño de la sombra de la caja para dar más efecto de brillo. Para comenzar, cree una nueva sección con una fila con una columna y agregue un botón en una fila. Antes de actualizar el módulo de botón, abra la configuración de la sección y dé a la sección un fondo oscuro (# 33333). Ahora abra la configuración del botón. Puede dejar el texto predeterminado del botón “Haga clic aquí”. Luego, actualice la siguiente configuración de diseño: Alineación del botón: Center Use estilos personalizados para el botón: Sí Botón Tamaño del texto: 18 PX Color de texto: #FFFFFF Botón del sótano Color izquierdo: # 00FF8C Botón de jardinería de color derecho: # 15C39A Tipo de gradiente: Dirección radial radial: Dirección radial: Centro de posición final: 75% (establecer el tipo de gradiente en radial le dará al gradiente una forma de círculo que se extiende hacia afuera. Asegúrese de que el color más claro aparezca en el medio del gradiente para crear el efecto de brillo). El ancho del nudo del botón: 0 px El rayo de cuchillo del botón: 100 px letra de espacción (predeterminada): 4 px espartir entre botones (flujo): 5 px (mayor distancia al cursor extenderá fácilmente todo el botón para un buen efecto) Font Peso: Ultra Bold Font Style: I, TT Button Icon: Flecha derecha (ver captura de pantalla) ENLIZACIÓN PERSONALIZADO: 20 PX hacia arriba, 20 px hacia abajo, 30 px a la izquierda, 50 px a la derecha (necesita más relleno derecho para tener en cuenta el botón de flecha derecha) Box Sombra:
Ver Box Sombra Posición vertical Captura del cuadro: 0px Box Shadow Shadow Desfluencia (predeterminado): 64 PX La fuerza de la sombra de la caja (flotante): 100 px de potencia de la sombra de la caja: -12px sombra: rgba (0.255,140 , 66) (la sombra de la caja se agrega al efecto de brillo cuando coincide con el color del tono con el color del botón. Aumentar la intensidad de la desenfoque aumentará y brillará el botón) Verifique el diseño final con el efecto de desplazamiento .
Más botones de inspiración Para descubrir sobre la inspiración de los estilos de los botones, vea algunos de estos otros artículos:

Cómo crear el botón de fuente del icono con el div

Diseñe una apariencia de división única en una pantalla completa con un botón de desplazamiento animado

Cómo estilizar sus botones sociales monarca para que se ajusten al diseño de su sitio.

7 teclas para crear un botón de suscripción irresistible
Pensamientos finales ¡Espero que estos ejemplos lo inspiraran a maximizar el módulo de botón Divin de nuevas maneras creativas! Debido a que un impulso a la acción es muy importante para su sitio web, siempre es bueno tener una variedad de ideas en nuestra caja de herramientas para crear algunos botones únicos. ¡Siéntase libre de usar estas ideas para proponer algunos estilos increíbles de botones! Espero tener noticias suyas en los comentarios. ¡Suerte!