codrops/magneticbuttons

A set of buttons with a magnetic interaction and a hover effect.

Magnetic Buttons

A small set of magnetic buttons with some fun hover animations. Inspired by the button animation seen on Cuberto.

Article on Codrops

Demo

Installation

Install dependencies:

npm install

Compile the code for development and start a local server:

npm start

Create the build:

npm run build

Misc

Follow Codrops: Twitter, Facebook, GitHub, Instagram

License

MIT

Made with 💙 by Codrops

magneticbuttons's Issues

page reload issue

Hello! Faced a problem, when reloading a page in google chrome, the hover zone moves somewhere to the top of the page. The effect starts working normally again if you scroll to the top of the page and reload. I don’t see any point in attaching the code, I used your files and connected the demo4.e22d7780.js file to the project. I checked for conflicts with other files - I found nothing. In all other browsers, everything works as it should. Please tell me what this problem may be related to, what I did wrong.

Wrong effect position

Hello, i was testing the index"1" when i face this issue:
i put about 70 span between the header closure and button start(to make the page higher than the screen) and others 30 below the button closure.
The problem is that now the magnetic effect no longer starts from the position of the button but a little higher even if I reload the page.

More than one

Hi there and first of all congrats for your amazing job.
I've been playing around with these magnetic buttons and I am wondering if is it possible to add more than only one on the same HTML, I've been trying it with no luck. could you point us to the right direction to achieve that?

Thanks heaps

Does not detect multiple buttons

Hello.
When the html button is duplicated and placed elsewhere in the html code, it doesn't work because it only detects one. The code is not prepared to have multiple buttons in the same html. How do I implement that? I think it would be a nice improvement.