Complemento de botones magnéticos de JavaScript

Botones magnéticos: estos botones son magnéticos y siguen el puntero del mouse cuando el puntero pasa sobre él. Estos botones se utilizan en las páginas web para diversos fines de interfaz de usuario.

Nota: descargue el complemento MagneticButtons basado en JavaScript y guárdelo en su carpeta de trabajo e incluya los archivos relevantes en la sección principal de su código HTML como se muestra a continuación en los ejemplos.

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

Ejemplo 1:

<!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="
        https://use.typekit.net/jpv1bvw.css">
    <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>

Producción:

Ejemplo 2: incluya los siguientes archivos en su código para que funcione.

<enlace href=”button.5d2fdfe7.css” rel=”hoja de estilo” type=”text/css”/>
<script src=”demo2.44794d1a.js”></script>

<!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="
        https://use.typekit.net/jpv1bvw.css">
    <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>

Producción:

Ejemplo 3: incluya los siguientes archivos.

<enlace href=”button.93b3ed9d.css” rel=”hoja de estilo”
<script src=”demo3.b516845c.js”></script>

<!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="
        https://use.typekit.net/jpv1bvw.css">
    <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>

Producción:

Ejemplo 4: incluya los siguientes archivos.

<enlace href=”button.9ccad82e.css” rel=”hoja de estilo”
type=”text/css”/>
<script src=”demo4.e22d7780.js”></script>

<!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="
        https://use.typekit.net/jpv1bvw.css">
    <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>

Producción:

Ejemplo 5: incluya los siguientes archivos.

<enlace href=”button.b160bf58.css” rel=”hoja de estilo”
type=”text/css”/>
<script src=”demo5.c1b42ce3.js”></script>

<!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="
        https://use.typekit.net/jpv1bvw.css">
</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>

Producción:

Ejemplo 6: incluya los siguientes archivos.

<enlace href=”button.bc1eb4ce.css” rel=”hoja de estilo”
type=”text/css”/>
<script src=”demo6.a93520db.js”></script>

<!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="
        https://use.typekit.net/jpv1bvw.css">
    <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>

Producción:

Publicación traducida automáticamente

Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *