JavaScript MagneticButtons Plugin

MagneticButtons: These buttons are magnetic and follow the mouse pointer when the pointer hovers over it. These buttons are used in web pages for various UI purposes.

Note: Please download the JavaScript based MagneticButtons plugin and keep them in your working folder and include the relevant files in the head section of your HTML code as shown below in the examples.

<link href=”https://use.typekit.net/jpv1bvw.css” rel=”stylesheet” type=”text/css”/>
<link href=”base.98fd6c19.css” rel=”stylesheet” type=”text/css”/>
<link href=”button.f89f9832.css” rel=”stylesheet” type=”text/css”/>
<script src=”demo.9ce5c2ea.js”></script>
<script src=” demo1.151408fb.js”></script>

Example 1:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en" class="no-js">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href="
    <link rel="stylesheet" type="text/css" href="
        base.98fd6c19.css">
    <link rel="stylesheet" type="text/css" href="
        button.f89f9832.css">
</head>
  
<body class="demo-1">
    <main>
        <div class="content">
            <button class="button">
                <span class="button__text">
                    <span class=
                        "button__text-inner">
                        Click
                    </span>
                </span>
            </button>
        </div>
        <nav class="demos">
            <a href="index.html" class=
                "demo demo--current" aria-label="">
            </a>
        </nav>
    </main>
    <svg class="cursor" width="25" 
        height="25" viewBox="0 0 25 25">
        <circle class="cursor__inner" 
            cx="12.5" cy="12.5" r="6.25">
        </circle>
    </svg>
    <script src="demo.9ce5c2ea.js"></script>
    <script src="demo1.151408fb.js"></script>
</body>
  
</html>

chevron_right


Output:



Example 2: Please include the following files in your code for its working.

<link href=”button.5d2fdfe7.css” rel=”stylesheet” type=”text/css”/>
<script src=”demo2.44794d1a.js”></script>

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en" class="no-js">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="
        width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href="
    <link rel="stylesheet" type="text/css" href="
        button.5d2fdfe7.css">
    <link rel="stylesheet" type="text/css" href="
        base.98fd6c19.css">
</head>
  
<body class="demo-2">
    <main>
        <div class="content">
            <button class="button">
                <div class="button__deco">
                    <div class=
                        "button__deco-filler">
                    </div>
                </div>
                <span class="button__text">
                    <span class=
                        "button__text-inner">
                        Enter
                    </span>
                </span>
            </button>
        </div>
        <nav class="demos">
            <a href="myindex2.html" 
                class="demo demo--current" 
                aria-label="">
            </a>
        </nav>
    </main>
    <svg class="cursor" width="25" 
        height="25" viewBox="0 0 25 25">
        <circle class="cursor__inner" 
            cx="12.5" cy="12.5" r="6.25">
        </circle>
    </svg>
    <script src="demo2.44794d1a.js"></script>
    <script src="demo.9ce5c2ea.js"></script>
  
</body>
  
</html>

chevron_right


Output:

Example 3: Please include the following files.

<link href=”button.93b3ed9d.css” rel=”stylesheet”
<script src=”demo3.b516845c.js”></script>

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en" class="no-js">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="
        width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href="
    <link rel="stylesheet" type="text/css" href="
        button.93b3ed9d.css">
    <link rel="stylesheet" type="text/css" href="
        base.98fd6c19.css">
</head>
  
<body class="demo-3">
    <main>
        <div class="content">
            <button class="button">
                <span class="button__text">
                    <span class=
                    "button__text-inner">
                    Plz Confirm
                    </span>
                </span>
            </button>
        </div>
        <nav class="demos">
            <a href="index3.html" 
                class="demo demo--current" 
                aria-label="Demo 3">
            </a>
        </nav>
    </main>
    <svg class="cursor" width="25" 
        height="25" viewBox="0 0 25 25">
        <circle class="cursor__inner" 
            cx="12.5" cy="12.5" r="6.25">
        </circle>
    </svg>
    <script src="demo3.b516845c.js"></script>
    <script src="demo.9ce5c2ea.js"></script>
</body>
  
</html>

chevron_right


Output:

Example 4: Please include the following files.

<link href=”button.9ccad82e.css” rel=”stylesheet”
type=”text/css”/>
<script src=”demo4.e22d7780.js”></script>



filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en" class="no-js">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="
        width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href="
    <link rel="stylesheet" type="text/css" href="
        base.98fd6c19.css">
    <link rel="stylesheet" type="text/css" href="
        button.9ccad82e.css">
  
</head>
  
<body class="demo-4">
    <main>
        <div class="content">
            <button class="button">
                <div class="button__filler"></div>
                <span class="button__text">
                    <span class=
                        "button__text-inner">
                        Watch
                    </span>
                </span>
            </button>
        </div>
        <nav class="demos">
            <a href="myindex4.html" 
                class="demo demo--current" 
                aria-label="">
            </a>
        </nav>
    </main>
    <svg class="cursor" width="25" 
        height="25" viewBox="0 0 25 25">
        <circle class="cursor__inner" 
            cx="12.5" cy="12.5" r="6.25">
        </circle>
    </svg>
    <script src="demo4.e22d7780.js"></script>
    <script src="demo.9ce5c2ea.js"></script>
</body>
  
</html>

chevron_right


Output:

Example 5: Please include the following files.

<link href=”button.b160bf58.css” rel=”stylesheet”
type=”text/css”/>
<script src=”demo5.c1b42ce3.js”></script>

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en" class="no-js">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="
        width=device-width, initial-scale=1">
  
    <link rel="stylesheet" type="text/css" 
        href="button.b160bf58.css">
    <link rel="stylesheet" type="text/css" 
        href="base.98fd6c19.css">
    <link rel="stylesheet" href="
</head>
  
<body class="demo-2">
    <main>
        <div class="content">
            <button class="button">
                <div class="button__deco 
                    button__deco--2">
                </div>
                <div class="button__deco 
                    button__deco--1">
                </div>
                <span class="button__text">
                    <span class=
                        "button__text-inner">
                        start
                    </span>
                </span>
            </button>
        </div>
        <nav class="demos">
            <a href="index5.html" 
                class="demo demo--current" 
                aria-label="">
            </a>
        </nav>
    </main>
    <svg class="cursor" width="25" 
        height="25" viewBox="0 0 25 25">
        <circle class="cursor__inner" 
            cx="12.5" cy="12.5" r="6.25">
        </circle>
    </svg>
    <script src="demo5.c1b42ce3.js"></script>
    <script src="demo.9ce5c2ea.js"></script>
</body>
  
</html>

chevron_right


Output:

Example 6: Please include the following files.

<link href=”button.bc1eb4ce.css” rel=”stylesheet”
type=”text/css”/>
<script src=”demo6.a93520db.js”></script>

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en" class="no-js">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="
        width=device-width, initial-scale=1">
  
    <link rel="stylesheet" type="text/css" href="
        button.bc1eb4ce.css">
    <link rel="stylesheet" href="
    <link rel="stylesheet" type="text/css" href="
        base.98fd6c19.css">
</head>
  
<body class="demo-4">
    <main>
        <div class="content">
            <div class="button-wrap">
                <button class="button">
                    <div class="button__deco"></div>
                    <span class="button__text">
                        <span class=
                            "button__text-inner">
                            Explore
                        </span>
                    </span>
                </button>
            </div>
        </div>
        <nav class="demos">
            <a href="index6.html" 
                class="demo demo--current" 
                aria-label=""></a>
        </nav>
    </main>
    <svg class="cursor" width="25" 
        height="25" viewBox="0 0 25 25">
        <circle class="cursor__inner" 
            cx="12.5" cy="12.5" r="6.25">
        </circle>
    </svg>
    <script src="demo6.a93520db.js"></script>
    <script src="demo.9ce5c2ea.js"></script>
</body>
  
</html>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.