Плагин JavaScript MagneticButtons

Опубликовано: 5 Января, 2022

MagneticButtons: эти кнопки являются магнитными и следуют за указателем мыши при наведении на него указателя. Эти кнопки используются на веб-страницах для различных целей пользовательского интерфейса.

Примечание. Загрузите подключаемый модуль MagneticButtons на основе JavaScript, храните его в своей рабочей папке и включите соответствующие файлы в заголовок своего HTML-кода, как показано ниже в примерах.

<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>

Пример 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 >

Выход:

Пример 2: Пожалуйста, включите в свой код следующие файлы для его работы.

<link href=”button.5d2fdfe7.css” rel=”stylesheet” 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 >

Выход:

Пример 3: Включите следующие файлы.

<link href=”button.93b3ed9d.css” rel=”stylesheet”
<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 >

Выход:

Пример 4: Включите следующие файлы.

<link href=”button.9ccad82e.css” rel=”stylesheet”
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 >

Выход:

Пример 5: Включите следующие файлы.

<link href=”button.b160bf58.css” rel=”stylesheet”
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 >

Выход:

Пример 6: Включите следующие файлы.

<link href=”button.bc1eb4ce.css” rel=”stylesheet”
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 =
JavaScript JQuery

РЕКОМЕНДУЕМЫЕ СТАТЬИ

Что такое тернарный оператор?
23 Января, 2024
Ember.js Свойство содержимого ArrayProxy
24 Февраля, 2023
Ошибка «Объект не определен» при попытке повернуть объект в three.js
24 Февраля, 2023
Как изменить строку в JavaScript?
23 Февраля, 2023
Как создать массив с несколькими объектами, имеющими несколько вложенных пар ключ-значение в JavaScript?
23 Февраля, 2023
Создайте адаптивную скользящую форму входа и регистрации с использованием HTML CSS и JavaScript
23 Февраля, 2023
Что такое модули в Typescript?
23 Февраля, 2023
Как создать регулярное выражение, принимающее только специальную формулу?
23 Февраля, 2023