Los botones magnéticos son un estilo que resisten bien el paso del tiempo.
Hoy os traemos un completo ejemplo de botones magnéticos para que puedas implementarlos en tu sitio web, y con un poco de personalización, quedarán de lujo.
Es obra de nuestro amigacho Cuberto, y la principal idea que hay detrás de ellos es que el botón siga al cursor (en un corto y suave movimiento).
Botones magnéticos elegantes y fáciles de desarrollar
Además del movimiento imitando la atracción del imán, en el enlace de demostración que os proporcionamos más abajo, hay algunos efectos hover interesantes.
Con un pequeño elemento adicional como una sombra u otra línea, el html para este tipo de botones queda simple, claro y limpio.
A esto le sumamos un efecto parallax effect creado alrededor del botón que mueva de forma independiente los elementos y tendremos un resultado perfecto. Podemos personalizar los botones magnéticos como queramos, el límite está en nuestra imaginación.
Lo mejor de todo, el js asociado a los botones pesa muy poco (menos de 10kb), y utiliza javascript puro.