Shimmer Button
介绍
沿边框旋转的一道流光，悬停时轻微放大，箭头前移。适合首屏主按钮。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Shimmer Button 加进你的项目并换成你的配色。
适用场景
注册、下单、提交表单和落地页的行动号召按钮，需要一个让人愿意点的主操作时。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add shimmer-button
mcp › 使用 8pt MCP 调用 get_component("shimmer-button")
代码
Shimmer Button 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<button class="x-shim" type="button"> <span class="x-shim__glow" aria-hidden="true"></span> <span class="x-shim__label">开始构建 <i aria-hidden="true">→</i></span> </button>
.x-shim{position:relative;overflow:hidden;isolation:isolate;border:0;border-radius:999px;padding:15px 30px;background:#0b0b10;color:#fff;font:600 15px/1 var(--d-font,system-ui,sans-serif);cursor:pointer;box-shadow:0 10px 40px -12px var(--d-accent,#4D74FF);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.x-shim:hover{transform:scale(1.04)}
.x-shim:active{transform:scale(.98)}
.x-shim__glow{position:absolute;left:50%;top:50%;width:320%;aspect-ratio:1;z-index:-2;background:conic-gradient(from 0deg,transparent 0 68%,#7f6bff 78%,#7cf3ff 86%,transparent 94%);transform:translate(-50%,-50%) rotate(0);animation:x-shim-spin 2.8s linear infinite}
.x-shim::after{content:"";position:absolute;inset:1.5px;z-index:-1;border-radius:inherit;background:linear-gradient(180deg,#1a1a24,#0b0b10)}
.x-shim__label{display:inline-flex;align-items:center;gap:8px}
.x-shim__label i{font-style:normal;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.x-shim:hover .x-shim__label i{transform:translateX(4px)}
@keyframes x-shim-spin{to{transform:translate(-50%,-50%) rotate(1turn)}}const init = (root) => {};订阅 Builder 查看完整源码。查看价格