Button Magnetic

Xem trước

Nó cung cấp một sự tương tác độc đáo trong đó nút di chuyển như thể nó được con trỏ chuột kéo. Hoạt ảnh sẽ tự động phát ngay sau khi người dùng trưng bày.

Trường hợp sử dụng và tính năng

Tương tác vi mô có tác động cao: Không giống như các hoạt ảnh đường dẫn thông thường và hiệu ứng phát sáng, thành phần này kết hợp khái niệm “lực từ” của việc theo dõi chuột.
Hoàn hảo cho các trang web danh mục đầu tư/sáng tạo: Tăng khả năng phân phối của bạn bằng cách mang đến cho khách truy cập một bất ngờ nhỏ.
Hiệu ứng cải thiện CTR: Bằng cách áp dụng điều này cho các nút CTA (Kêu gọi hành động), nó được cho là có tác dụng giảm bớt rào cản tâm lý cho việc hiển thị và nhấp chuột.
Chỉ đạt được với JavaScript: Không cần thư viện. Một cách triển khai đơn giản cập nhật động transform trong sự kiện mousemove.

Điểm thiết kế và UX

Phản hồi dựa trên vật lý: Truyền đạt một cách trực quan rằng nút là một thành phần tương tác bằng cách tạo ra nguy cơ chạm vào con trỏ.
cubic-bezier(0.23, 1, 0.32, 1): Bằng cách sử dụng đường cong kiểu dễ hiểu, chuyển động của nút sẽ trông mượt mà và chặt chẽ.
Hiệu ứng lung linh: Đạt được hiệu ứng ánh sáng chảy với phần tử giả ::before.
Khả năng truy cập: mouseleave trở lại vị trí ban đầu một cách đáng tin cậy, do đó không có vấn đề gì với thao tác bàn phím hoặc thiết bị cảm ứng.

Cách tùy chỉnh

Bạn có thể điều chỉnh cường độ lực từ bằng cách thay đổi giá trị của biến strength:


// 弱め（微妙な動き）

var strength = 0.15;



// 標準

// var strength = 0.35;



// 強め（大きく動く）

// var strength = 0.5;

Để thay đổi màu nút, chỉ cần thay đổi CSS background:


/* サンセット */

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



/* オーシャン */

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



/* エメラルド */

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

Mã triển khai

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

Trạng thái tương thích với trình duyệt

| Trình duyệt | Trạng thái tương thích |

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

| Chrome 60+ | ✅ Hoàn toàn tương thích |

| Firefox 55+ | ✅ Hoàn toàn tương thích |

| Safari 10.1+ | ✅ Hoàn toàn tương thích |

| Cạnh 79+ | ✅ Hoàn toàn tương thích |

Sự kiện mousemove không được kích hoạt trên thiết bị cảm ứng nên hiệu ứng nam châm không hiển thị nhưng vẫn có thể nhấn vào nút như bình thường.