Магнитная кнопка

Предварительный просмотр

Он обеспечивает уникальное взаимодействие, при котором кнопка перемещается так, как если бы ее тянул курсор мыши. Анимация будет автоматически воспроизводиться сразу после того, как пользователь выставит экспонат.

Варианты использования и функции

• Высокоэффективное микровзаимодействие: в отличие от обычной анимации пути и эффектов свечения, этот компонент включает в себя концепцию «магнитной силы» отслеживания мыши.

• Идеально подходит для портфолио/креативных сайтов: увеличьте эффективность распространения, преподнеся посетителям небольшой сюрприз.

• Эффект повышения CTR: считается, что применение этого эффекта к кнопкам CTA (призыв к действию) снижает психологические препятствия для отображения и нажатия.

• Достигается только с помощью JavaScript: библиотека не требуется. Простая реализация, которая динамически обновляет Transform при событии mousemove.

##Точки дизайна и UX

1. Физическая обратная связь. Интуитивно сообщите, что кнопка является интерактивным элементом, создавая риск удара по курсору.

2. cubic-bezier(0.23, 1, 0.32, 1): при использовании кривой типа easy-out движение кнопки будет плавным и тугим.

3. Эффект мерцания: добейтесь эффекта струящегося света с помощью псевдоэлемента ::before.

4. Доступность: mouseleave надежно возвращается в исходное положение, поэтому нет проблем с работой клавиатуры или сенсорными устройствами.

Как настроить

Вы можете регулировать силу магнитной силы, изменяя значение переменной «сила»:

// 弱め（微妙な動き）

var strength = 0.15;



// 標準

// var strength = 0.35;



// 強め（大きく動く）

// var strength = 0.5;

Чтобы изменить цвет кнопки, просто измените CSS «background»:

/* サンセット */

background: linear-gradient(135deg, #f97316, #ef4444);



/* オーシャン */

background: linear-gradient(135deg, #06b6d4, #3b82f6);



/* エメラルド */

background: linear-gradient(135deg, #10b981, #059669);

Код реализации

<button class="magnetic-btn" id="magnetic-btn">

HOVER ME

<span class="magnetic-btn-arrow">→</span>

</button>



<style>
.magnetic-btn {

position: relative;

padding: 18px 48px;

font-size: 1.1rem;

font-weight: 700;

letter-spacing: 0.1em;

color: white;

background: linear-gradient(135deg, #6366f1, #8b5cf6);

border: none;

border-radius: 50px;

cursor: pointer;

outline: none;

box-shadow: 0 20px 60px rgba(99,102,241,0.4);

transition: transform 0.15s cubic-bezier(0.23,1,0.32,1), box-shadow 0.3s ease;

display: inline-flex;

align-items: center;

gap: 10px;

overflow: hidden;

}

.magnetic-btn::before {

content: '';

position: absolute;

top: -50%;

left: -60%;

width: 40%;

height: 200%;

background: rgba(255,255,255,0.15);

transform: skewX(-20deg);

transition: left 0.5s ease;

pointer-events: none;

}

.magnetic-btn:hover::before { left: 120%; }

.magnetic-btn:hover {

box-shadow: 0 30px 80px rgba(139,92,246,0.6), 0 20px 60px rgba(99,102,241,0.4);

}

.magnetic-btn-arrow {

display: inline-flex;

transition: transform 0.3s ease;

pointer-events: none;

}

.magnetic-btn:hover .magnetic-btn-arrow { transform: translateX(4px); }
</style>



<script>

(function() {

var btn = document.getElementById('magnetic-btn');

if (!btn) return;

var strength = 0.35;

btn.addEventListener('mousemove', function(e) {

  var rect = this.getBoundingClientRect();

  var dx = e.clientX - (rect.left + rect.width / 2);

  var dy = e.clientY - (rect.top + rect.height / 2);

  this.style.transform = 'translate(' + (dx*strength) + 'px,' + (dy*strength) + 'px) scale(1.08)';

});

btn.addEventListener('mouseleave', function() {

  this.style.transform = '';

  this.style.boxShadow = '';

});

})();

</script>

Статус совместимости браузера

| Браузер | Статус совместимости |

|--------|-------|

| Хром 60+ | ✅ Полностью совместим |

| Firefox 55+ | ✅ Полностью совместим |

| Сафари 10.1+ | ✅ Полностью совместим |

| Край 79+ | ✅ Полностью совместим |

Событие mousemove не запускается на сенсорных устройствах, поэтому эффект магнита не отображается, но кнопка доступна для нажатия, как обычно.