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