Cómo convertir el cursor en un botón al colocar un elemento usando div Div

Al mostrar elementos que hacen clic en su página, es importante asegurarse de que las personas sepan que pueden elegir un elemento y hacer clic en él. Una de las formas más obvias de hacerlo es incluir un botón, pero si está buscando una forma interactiva adicional de alentar los clics en su página, disfrutará de este tutorial. Hoy, le mostraremos cómo convertir el cursor en un botón al colocar con el mouse en un determinado elemento de clic, como una imagen. Esto agregará un estimulante adicional a sus visitantes y dará como resultado una hermosa interacción de página. ¡Podrá descargar el archivo JSON de forma gratuita!
Vamos a eso. Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo rápido al resultado en diferentes tamaños de pantalla. Escritorio

Móvil

Descargue el aspecto gratuito para poner su mano en el aspecto gratuito, primero deberá descargarlo usando el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
1. Cree la estructura del elemento Agregue una nueva sección de color de fondo. Comenzaremos este tutorial construyendo la estructura del elemento en una página de división. Agregue una nueva sección y use un color de fondo blanco para ella.
Color de fondo: #ffffff
Espacio ir a la pestaña de diseño de la sección y cambiar la configuración de espaciado de la siguiente manera:

Revestimiento superior: 80 px
Finamiento inferior: 0 PX
Agregue una nueva estructura de columna de fila Continuar agregando una nueva línea utilizando la siguiente estructura de columnas:

Dimensión sin agregar módulos, abra la configuración de la fila y cambie el ancho máximo en la configuración del tamaño.

Ancho máximo: 2580 PX
El espacio elimina todas las deflantes predeterminadas y sin fondo.

SUS Lingo: 0 PX
Finamiento inferior: 0 PX
Agregue el módulo de imagen a la columna 1 Cargue la imagen para hacer módulos, comenzando con un módulo de imagen en la columna 1. Cargue una imagen de su elección.

Agregue un enlace Agregue un enlace al siguiente módulo de imagen.

Escala con el mouse luego, acceda a la pestaña de diseño y cambie la configuración del movimiento del módulo. Vemuestro: 90%

Clase CSS Complete la configuración del módulo aplicando la siguiente clase CSS en la pestaña Avanzada:
Clase CSS: ACURSOR DE IMAGEN

Agregue el módulo de texto no. 1 en la columna 1 Agregue el contenido H3 al siguiente módulo, que es un módulo de texto que contiene un contenido H3.
Configuración de texto H3 Cambiar a la pestaña Diseño del módulo y cambiar la configuración de texto H3 en consecuencia:

3 Fuentes de fuentes: actor

Rúbrica 3 Color de texto: # 000000
Rúbrica 3 Dimensión de texto:
Escritorio: 35 PX
Tableta: 28 PX
Teléfono: 22 PX
Rúbrica 3 altura de línea: 1.4em
Espacio agregue algunos bordes inferiores.
Margen inferior: 15 PX

Agregue el módulo de texto no. 2 En la columna 1 Agregar contenido y luego, agregue otro módulo de texto justo debajo del anterior, con un contenido de descripción.
Configuración de texto Cambie la configuración de texto del módulo de la siguiente manera:

Texto de fuente: actor

Color de texto: # 75BAFF
Tamano del texto:
Escritorio: 22 PX
Tableta: 18 PX
Teléfono: 15 PX
Texto de la carta de espacio: 0.5 PX
Altura de la línea de letras: 2em
Agregue el módulo de botón a la columna 1 Agregue una copia y el último módulo que necesitamos en esta columna es un módulo de botón. Agregue una copia de su elección.
Configuración del botón Pase a la pestaña Diseño del módulo y cambie la configuración del botón de acuerdo con:

Use estilos personalizados para el botón: Sí

El color del texto del botón: # 000000
El ancho del nudo del botón: 0 PX
Botón Raza: 1 PX
Botón de fuente: actor
Muestra el icono del botón: Sí


Icono de botón de colocación: izquierda
Muestre el icono solo en el cursor para el botón: no
Espaciado Agregar algunos valores de espaciado personalizados. Matrimonio inferior: 80 PX
Finamiento inferior: 20 PX

Revestimiento derecho: 30 PX
Sombra de cuadro y complete la configuración del módulo aplicando la siguiente configuración de sombra del cuadro:
Posición horizontal de la sombra de la caja: 0 px
Box Shadow Posición vertical: 2 PX

Color de la sombra: # 000000
Limpie la columna 2 Después de haber completado la primera columna y todos los módulos en ella, borre la segunda fila desnuda.
Clon Columna 1 y reutilice la primera columna clonándola una vez.
Clon toda la fila continúa clonando toda la fila.

Cambie todo el contenido, imágenes y enlaces duplicados, asegúrese de cambiar todo el contenido, las imágenes y los enlaces en cada una de las columnas duplicadas.

2. Agregue el cursor Agregue una nueva línea a la sección de la columna ahora que tenemos la estructura de los elementos en su lugar, es hora de crear el diseño del cursor. Para esto, agregaremos una nueva fila a nuestra sección utilizando la siguiente estructura de columna:

Espacio Abra la configuración de la fila y elimine todos los valores predeterminados desde arriba y la parte inferior.

SUS Lingo: 0 PX

Finamiento inferior: 0 PX

Agregue el módulo de texto del cursor al nuevo contenido de la columna de fila y luego, agregue un módulo de texto a la nueva fila. Este módulo de texto se dedicará a crear el diseño del botón del cursor. Agregue una copia de su elección al cuadro de contenido.
El color de fondo entonces, agregue un color de fondo.
Color de fondo: # 47669B

Configuración de texto Vaya a la pestaña Diseño y estilice el texto en consecuencia:

Texto de fuente: actor
El peso de la fuente de texto: en negrita

Text -Text estilo: mayúscula
Color de texto: #ffffff
Texto de la carta de espacio: 2 PX
Alineación de texto: Centro
La dimensión agrega un valor de ancho y altura a la siguiente configuración de tamaño. Poco: 150 PX
Altura: 150 PX
Border transformamos este módulo en un círculo cambiando la configuración del borde.

Todas las esquinas: 100 px
Box Shadow También agregaremos una sombra de caja sutil.
Poder de poco claro de la sombra de la caja: 0 px

Poder de extender la sombra de la caja: 20 px
Color de la sombra: RGBA (713.255.0.14)

Clase CSS entonces, le daremos a nuestro módulo una clase CSS.
Clase CSS: cursor
El elemento CSS principal agregamos algunas líneas de código CSS al elemento principal del módulo. Transición: todos .1s lineales;
Pointer-Events: Ninguno;

Pantalla: Flex;
Justify-Concursing: Centro;

Alinine-Ritams: Centro;
Posición y completaremos la configuración del módulo cambiando la posición en la pestaña avanzada:
Posición: fijo
Ubicación: superior izquierda
IND ÍNDICE: 2

Agregue un módulo de código en el módulo de texto ahora que hemos diseñado nuestro cursor, es hora de que la funcionalidad funcione. Para hacer esto, agregaremos un nuevo módulo de código justo debajo del cursor de texto del módulo.
Agregue etiquetas de estilo y script Agregue algunas etiquetas de estilo y script a su módulo de código.
Agregar código CSS Ingrese las siguientes filas de código CSS entre etiquetas de estilo: .Hide-Course {
Cursor: ninguno;

}

.cursor {

-WebKit-Transition: ¡todos los 0.2s facilitados!
-Moz-Transition: ¡todos los 0.2s facilitados!
-O-transición: ¡todos los 0.2s facilitados! importantes;
Transición: ¡todos los 0.2s facilitados! Importantes;
Visibilidad: oculto;
Opacidad: 0;
}
.Show-Accesor {
Visibilidad: ¡Visible! Importante;
Opacidad: 1;
}
Agregue el código jquey y use las siguientes filas del código jquey entre etiquetas de script: jQuery (docum) .ready (function ($) {
Cursor de lima = $ (‘. Cursor’);
$ (‘. Image-Acursor’). MouseMove (funciones (s) {
cursor.css ({

Arriba: E.Clienty – Cursor.Height () / 2,
Izquierda: e.clientx – cursor.width () / 2
});
cursor.addclass (‘show -cursor’);
$ (‘Body’). AddClass (‘Hide-Acursor’);
});
$ (‘. Image-acursor’). Mousleave (function () {
cursor.removeclass (‘show -cursor’);
$ (‘Body’). RemoveClass (‘Hide-Acursor’);
});
});
Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla. Escritorio
Móvil
Pensamientos finales En este tutorial, le mostré cómo agregar más interacciones a los elementos que pueden hacer clic en su página. Le mostré cómo activar un botón de cursor cuando alguien revisa un elemento elegido por usted … Esto agrega interacción adicional a ¡Diseñe su página y puede ayudarlo a aumentar las tasas de clics! Puede descargar el archivo JSON de forma gratuita. Si tiene alguna pregunta o sugerencia, no dude en dejar un comentario en la sección de comentarios a continuación. Si está ansioso por obtener más información sobre Divi y obtener más regalos de la Divicidad, asegúrese de suscribirse a nuestro boletín de correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.