Magnetic Button
Nút kêu gọi hành động nghiêng về phía con trỏ trước cả khi được bấm
.zip · HTML / CSS / JS · v1.0.0
Miễn phí — không cần tài khoản hay email. Luôn là bản mới nhất.
Đang chạy trực tiếp
Giới thiệu
Chiếc nút bạn muốn người xem bấm, giờ có cảm giác sống động. Khi con trỏ lại gần, nút nghiêng về phía nó và dòng chữ trôi xa hơn một chút — một chút vật lý đủ để kéo ánh nhìn mà không ồn ào. Bấm vào thì gợn sóng lan ra từ đúng chỗ vừa bấm.
- Hai kiểu: nút gradient nổi bật và viên kính mờ nhẹ nhàng
- Mọi con số đều là CSS custom property hoặc tuỳ chọn: lực hút, tầm hút, màu, thời gian
- Script chỉ ghi vị trí, CSS lo chuyển động, nên mượt và nhẹ
- Không cần cài gì: một file CSS và một script nhỏ, hoặc một component React
Tính năng
- Bị hút về phía con trỏ ở gần; chữ bên trong trôi xa hơn một chút
- Gợn sóng lan ra từ đúng chỗ bấm, từ giữa nút khi bấm Enter / Space
- Kiểu gradient và kiểu kính mờ, đủ sáng và tối
- Dùng được cho <button> và <a>, bao nhiêu nút trên một trang cũng được
- Bản HTML/CSS/JS thuần và bản React (dùng được với Next.js)
- Không phụ thuộc thư viện, dưới 3 KB sau gzip
Cách dùng
Gắn stylesheet và script một lần, rồi thêm data-magnetic vào nút hoặc link bất kỳ:
<link rel="stylesheet" href="magnetic-button.css" />
<script src="magnetic-button.js" defer></script>
<button class="magnetic-button" type="button" data-magnetic>
<span class="magnetic-button__label">Bắt đầu</span>
</button>
<a class="magnetic-button" href="/pricing" data-magnetic data-variant="ghost">
<span class="magnetic-button__label">Xem bảng giá</span>
</a>Tuỳ chọn qua data attribute: data-magnetic-strength (mặc định 0.3), data-magnetic-label-strength
(0.2), data-magnetic-radius (48, đơn vị px), data-magnetic-max-shift (16, đơn vị px — nút
dịch tối đa bấy nhiêu). Chỉ nút gần con trỏ nhất mới chuyển động, nên các nút đặt sát nhau không
bao giờ đè lên nhau. Nút thêm vào sau khi trang đã tải:
MagneticButton.init(container) — hàm này trả về một hàm để gỡ ra.
Chép MagneticButton.tsx, magnetic-button.css và thư mục core vào dự án:
import { MagneticButton } from "./MagneticButton";
<MagneticButton onClick={start}>Bắt đầu</MagneticButton>
<MagneticButton variant="ghost" strength={0.45} maxShift={24}>Xem bảng giá</MagneticButton>Mọi prop của <button> đều dùng được (type, disabled, onClick, aria-*…). React 18 hoặc 19.
Component bắt đầu bằng "use client", nên dùng được trong mọi page hay server component. Với App
Router không cần làm gì thêm. Với Pages Router, chuyển dòng import CSS vào pages/_app.
Đặt các biến sau trên .magnetic-button (hoặc class của bạn):
| Biến | Đổi gì |
|---|---|
--magnetic-from, --magnetic-via, --magnetic-to |
Dải màu gradient |
--magnetic-text, --magnetic-glow, --magnetic-ring |
Màu chữ, quầng sáng, viền focus |
--magnetic-radius, --magnetic-padding |
Hình dạng và kích thước |
--magnetic-follow, --magnetic-return, --magnetic-ease |
Tốc độ bám theo và bật về |
Màu dùng light-dark(): tự theo color-scheme của trang.
Hỏi về sản phẩm này
Chưa chắc có hợp dự án của bạn? Cứ hỏi — câu trả lời lấy từ chính trang này.
Lịch sử phiên bản
1.0.0First releaseMới nhất
Plain HTML/CSS/JS and React builds. Primary and ghost styles, ripple, keyboard and reduced-motion support.
- Bản sửa lỗi và tính năng mới đều có ngay ở nút tải này — file tải về luôn là bản mới nhất.