Magnetic Button
介绍
按钮在感应区内被指针吸引，文字比按钮多走一段，离开后弹簧回位。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Magnetic Button 加进你的项目并换成你的配色。
适用场景
注册、下单、提交表单和落地页的行动号召按钮，需要一个让人愿意点的主操作时。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add magnetic-button
mcp › 使用 8pt MCP 调用 get_component("magnetic-button")
代码
Magnetic Button 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-mag"> <button class="x-mag__btn" type="button"><span>拖近一点</span></button> </div>
.x-mag{display:grid;place-items:center;width:100%;height:100%;min-height:200px}
.x-mag__btn{width:132px;height:132px;border-radius:50%;border:1px solid var(--d-line,rgba(255,255,255,.14));background:var(--d-card,#101016);color:var(--d-fg,#fff);font:600 14px/1 var(--d-font,system-ui,sans-serif);cursor:pointer;will-change:transform;box-shadow:0 30px 60px -30px var(--d-accent,#4D74FF)}
.x-mag__btn span{display:inline-block;will-change:transform}const init = (root) => {
const zone = root.querySelector('.x-mag'), btn = zone.querySelector('button'), label = btn.querySelector('span');
let tx = 0, ty = 0, x = 0, y = 0, raf = 0;
const tick = () => {
x += (tx - x) * 0.16; y += (ty - y) * 0.16;
btn.style.transform = `translate(${x}px, ${y}px)`; label.style.transform = `translate(${x * 0.4}px, ${y * 0.4}px)`;
raf = Math.abs(tx - x) + Math.abs(ty - y) > 0.1 ? requestAnimationFrame(tick) : 0;
};
const kick = () => { if (!raf) raf = requestAnimationFrame(tick); };
zone.addEventListener('pointermove', e => {
const r = btn.getBoundingClientRect(); tx = (e.clientX - r.left - r.width / 2) * 0.35; ty = (e.clientY - r.top - r.height / 2) * 0.35; kick();
});
…订阅 Builder 查看完整源码。查看价格