Cursor con efecto magneto en botones de Divi

Un cursor personalizado con efecto magneto en botón de Divi es una herramienta útil para mejorar la experiencia de usuario en tu sitio web. Este tipo de cursor personalizado es llamativo, atractivo y funciona como una excelente manera de guiar la atención del usuario hacia el botón o llamado a la acción que deseas resaltar.

Uno de los principales beneficios de utilizar un cursor personalizado con efecto magneto en botón de Divi es que mejora la usabilidad del sitio web. Con este tipo de cursor, es más fácil para los usuarios identificar el botón de llamado a la acción, y el efecto magneto aumenta la interactividad, lo que hace que los visitantes se sientan más atraídos por el sitio y estén más dispuestos a explorar y comprometerse con el contenido.

Además, un cursor personalizado con efecto magneto en botón de Divi también puede aumentar la tasa de conversión en tu sitio web. Al mejorar la usabilidad y la interacción, este tipo de cursor ayuda a que los visitantes tengan una experiencia más agradable y atractiva en tu sitio, lo que aumenta las posibilidades de que realicen una acción específica, como hacer clic en un botón de llamado a la acción, completar un formulario o suscribirse a un boletín informativo.

Otro beneficio de utilizar un cursor personalizado con efecto magneto en botón de Divi es que ayuda a que tu sitio web se destaque. Con este tipo de cursor personalizado, puedes hacer que tu sitio se vea más atractivo y distintivo, lo que puede ayudarte a destacar entre la competencia y atraer más visitantes a tu sitio web.

En resumen, si deseas mejorar la usabilidad, aumentar la tasa de conversión y hacer que tu sitio web sea más atractivo, considera utilizar un cursor personalizado con efecto magneto en botón de Divi. Este tipo de herramienta puede ayudarte a destacar entre la competencia y atraer más visitantes a tu sitio web, lo que puede ser especialmente importante si estás tratando de promocionar un producto o servicio en línea.

Qué es exactamente el efecto magneto y cómo funciona

El efecto magneto es una de esas microinteracciones que parecen pequeñas pero cambian por completo la sensación de un sitio. La idea es simple: cuando acercas el cursor a un botón, este reacciona como si fuera atraído por un imán y se desplaza ligeramente hacia el puntero, con una sutil rotación tridimensional. Es un movimiento mínimo, de apenas unos píxeles, pero comunica de inmediato que el elemento es interactivo.

En este tutorial combino dos efectos en uno: ese magnetismo en los botones y un cursor personalizado, un pequeño círculo que reemplaza al puntero y sigue al mouse por toda la página. Juntos crean una experiencia que se siente premium, ideal para sitios corporativos o portfolios donde la primera impresión lo es todo. Te aviso desde ya que es un tutorial de código, un poco más avanzado que los de arrastrar y soltar; pero la buena noticia es que el código ya está desarrollado: solo lo copias, lo pegas en los lugares correctos y, como mucho, ajustas un par de colores.

Dónde va cada parte del código en Divi

La implementación se reparte en tres lugares dentro de las Opciones del Tema de Divi (Divi > Opciones del tema), y respetar dónde va cada fragmento es la clave para que todo funcione. No tocas plantillas ni instalas plugins adicionales.

El primer fragmento va en la pestaña de Integración, en la sección del < head >. Es un bloque muy corto que crea un elemento con la clase cursor, que será el círculo que sigue al puntero. Lo colocas justo debajo de cualquier código que ya tengas ahí. El segundo fragmento también va en Integración, pero en la sección del < body >: es el JavaScript que genera toda la funcionalidad, tanto el movimiento del cursor como el efecto magneto de los botones. Es un script bastante largo, pero se trata de copiarlo y pegarlo tal cual.

El tercer fragmento es el CSS, y va en otra ubicación: en la pestaña General de las Opciones del Tema, dentro del campo Custom CSS, al final de todo el CSS que ya tengas. Define el aspecto del círculo, los bordes de los botones y, junto con el JavaScript, el efecto de contraste al pasar sobre un botón. Mientras no pegues este CSS no verás ningún cambio, así que es un paso que no puedes saltarte.

Consejo: el efecto no se ve dentro del constructor visual de Divi, solo se aprecia en la parte frontal del sitio. Así que cada vez que hagas un ajuste, guarda los cambios y recarga la página real para comprobar el resultado. Es normal que en el editor parezca que no pasa nada.

El efecto magneto en los botones

El magnetismo se aplica a la clase .et_pb_button, la clase global de todos los botones de Divi, así que funciona automáticamente en cada botón del sitio. El JavaScript escucha el movimiento del mouse sobre cada botón, calcula la diferencia entre la posición del cursor y el centro del botón, y aplica una transformación que combina un desplazamiento (translate) con una rotación 3D (rotate3d). Cuando el mouse sale, todo vuelve a su posición original de forma suave.

Lo interesante es que la intensidad del imán es ajustable: los valores que multiplican la posición del mouse (como 0.15 o 0.3) determinan qué tanto se mueve el botón. Bájalos para un efecto más sutil o súbelos para uno más pronunciado. Yo recomiendo mantenerlo discreto, porque el encanto está justo en que es delicado, no exagerado.

El cursor personalizado y el modo de mezcla de colores

El segundo protagonista es el círculo que reemplaza al cursor. Por defecto lo dejo en un gris neutro, porque funciona bien sobre casi cualquier fondo, sea oscuro, claro o blanco. Si quieres cambiarlo, el único valor que tocas en el CSS es el color de su borde. El círculo sigue al mouse mediante el JavaScript, que actualiza su posición con cada movimiento.

La parte más espectacular ocurre cuando el cursor pasa por encima de un botón. Ahí se activa una propiedad CSS llamada mix-blend-mode: difference, que hace que el círculo adopte automáticamente el color contrario del botón sobre el que está. No tienes que definir ese color a mano: el navegador lo calcula solo según la paleta. Por eso, sobre un botón negro el círculo se ve blanco, y sobre un botón rojo aparece un tono turquesa. Además, en ese momento el círculo crece de tamaño (un scale de 1.5) para reforzar la sensación de interacción.

Consejo: mientras más brillante sea el color de fondo de tus botones, más potente se ve el contraste del cursor. Colores vivos y saturados como un azul fosforescente generan un efecto de mezcla mucho más llamativo que los tonos apagados. Si quieres que este efecto luzca al máximo, juega con una paleta de acentos brillantes.

Cómo personalizar el efecto a tu marca

Aunque el efecto del mix-blend-mode es automático y no se puede forzar a un color específico, sí puedes adaptar varios elementos para que el conjunto combine con tu identidad. Si cambias el color de fondo de un botón, recuerda ajustar también su estado hover para que el borde no quede de un color distinto al relleno; ese pequeño detalle a veces genera resultados raros si se pasa por alto.

Este efecto rinde especialmente bien en sitios corporativos que combinan fondos oscuros con acentos brillantes. Sobre las zonas oscuras el contraste del cursor brilla, y los botones de acento crean ese pequeño momento de sorpresa cuando el visitante los toca. Es un recurso que, sin sobrecargar el diseño, le da a tu sitio ese aire de cuidado que distingue a las marcas que invierten en su presencia digital.

🎓 ¿Quieres aprender a crear interacciones avanzadas como esta y sacarle el máximo a Divi? Explora los cursos en uxdivi.com/cursos/ — desde lo básico hasta técnicas de nivel profesional.

Preguntas frecuentes

¿El efecto magneto funciona en todos los botones de mi sitio?

Sí. El código se aplica a la clase .et_pb_button, que es común a todos los botones de Divi. Por eso el magnetismo y el contraste del cursor funcionan automáticamente en cualquier botón del sitio, lo hayas personalizado o no.

¿Por qué no veo ningún cambio después de pegar el código?

Lo más probable es que falte el CSS. El JavaScript del head y el body por sí solos no muestran nada visible; el aspecto del cursor y el efecto se definen en el CSS que va en la pestaña General. Además, el efecto solo se aprecia en el frontend, no dentro del constructor visual.

¿Puedo cambiar el color del círculo del cursor?

Sí. En el CSS modificas el color del borde del círculo. El gris por defecto funciona bien sobre cualquier fondo, pero puedes ajustarlo a tu paleta. El color de contraste que aparece sobre los botones, en cambio, es automático y depende del color de cada botón.

¿Este efecto se ve en dispositivos móviles?

El cursor personalizado y el efecto magneto dependen del movimiento del mouse, por lo que están pensados para escritorio. En pantallas táctiles no hay puntero, así que el efecto no se activa; los botones siguen funcionando con normalidad, simplemente sin la microinteracción.

Conclusión

El cursor personalizado con efecto magneto es una de esas técnicas que, con muy poco esfuerzo, suben varios escalones la percepción de calidad de un sitio hecho con Divi. Combinar el magnetismo de los botones con un cursor que cambia de color por contraste crea una experiencia memorable, justo el tipo de detalle que hace que un visitante recuerde tu marca.

Lo mejor es que todo el trabajo pesado ya está resuelto en el código que te comparto: solo pegas cada fragmento en su lugar y ajustas los colores. Si te animas a probarlo, empieza con una paleta de acentos brillantes para que el efecto luzca al máximo, y déjame un comentario contándome cómo te quedó.

¿Eres miembro premium de UXDIVI? Checá acá abajo los recursos del tutorial 👇