Cómo construir elementos magnéticos en Webflow - Solución sin código

Cómo Crear un Bonito Efecto Hover de Botón Magnético con Webflow

¿Quieres dar un toque creativo a los botones de tu sitio Webflow? No busques más: ¡el efecto magnético del botón hover! En este tutorial, te mostraremos cómo crear este efecto paso a paso utilizando Webflow.

Introducción

¡Hola a todos! Mi nombre es Marvin Aziz, y estoy encantado de guiarte en la creación de un bonito efecto magnético de botón hover utilizando Webflow. En este tutorial, crearemos un botón personalizado con un efecto magnético que se activa cuando pasas el ratón por encima.

Cómo empezar

¡Manos a la obra! Estos son los pasos que seguiremos para crear nuestro botón magnético:

1. Crea un botón personalizado utilizando un bloque de enlace con texto dentro y una envoltura de fondo.
2. Añade otro bloque div y coloca tu botón dentro de él para crear un área hover más amplia.
3. Ve a la interacción y selecciona "mover el ratón sobre el elemento" para activar el efecto magnético.
4. Crea una nueva animación y nómbrala "tutorial ratón magnético". Establece la posición inicial y mueve el elemento hacia atrás en ambos ejes, luego muévelo hacia delante al 100% en ambos ejes para crear el efecto magnético.
5. Ajusta la animación para que sea más suave y elimina los activadores para vistas móviles.
6. Aplica la clase de bloque magnético a otros elementos como encabezados o imágenes para crear el mismo efecto.

Instrucciones paso a paso

Veamos con más detalle cada paso para crear nuestro botón magnético.

Paso 1: Crear un botón personalizado

Empezaremos creando un botón personalizado utilizando un bloque de enlace con texto dentro y una envoltura de fondo. Para ello, sigue estos pasos:

1. Abre Webflow y crea un nuevo proyecto.
2. Arrastra un bloque de enlace a tu página y añade texto dentro.
3. Selecciona el bloque de enlace y añade una envoltura de fondo haciendo clic en el icono "más" del panel Estilos y seleccionando "Fondo" en el menú desplegable.
4. Personaliza la envoltura de fondo a tu gusto, por ejemplo añadiendo un degradado o una imagen.

Paso 2: Añade otro bloque Div

A continuación, añadiremos otro bloque div y colocaremos nuestro botón dentro de él para crear un área hover más amplia. He aquí cómo hacerlo:

1. Arrastra un bloque div a tu página y colócalo encima de tu botón.
2. Arrastra tu botón dentro del bloque div.
3. Ajusta el tamaño y la posición del bloque div a tu gusto.

Paso 3: Activar el efecto magnético

Ahora, vamos a activar el efecto magnético siguiendo estos pasos:

1. Selecciona el bloque div que contiene tu botón.
2. Haz clic en el botón "Añadir interacción" del panel Interacciones.
3. Selecciona "Mover el ratón sobre el elemento" en el menú desplegable.
4. Ajusta la distancia y la intensidad a tu gusto.

Paso 4: Crear una nueva animación

Crearemos una nueva animación y la llamaremos "tutorial del ratón magnético". Te explicamos cómo:

1. Haz clic en el botón "Nueva animación" del panel Animaciones.
2. Nombra la animación "tutorial del ratón magnético".
3. Establece la posición inicial seleccionando "Actual".
4. Desplaza el elemento hacia atrás en ambos ejes fijando las posiciones X e Y en -10px.
5. Avanza el elemento al 100% en ambos ejes fijando las posiciones X e Y en 10px.
6. Ajusta la duración y la suavidad a tu gusto.

Paso 5: Ajusta la animación

Para que la animación sea más suave, sigue estos pasos:

1. Selecciona la animación "tutorial del ratón magnético".
2. Ajusta la duración, la suavidad y el retardo a tu gusto.
3. Elimina los activadores de las vistas móviles haciendo clic en el botón "Editar activadores" y desmarcando "Horizontal móvil", "Vertical móvil" y "Horizontal tableta".

¡Muchas gracias por seguir este tutorial! ¿Sabías que tengo un boletín en el que te envío todas mis mejores plantillas, trabajos creativos escogidos y comparto todo lo que aprendo mientras trabajo como propietaria de una agencia? ¡Échale un vistazo!

‍