Command CTA Band
介绍
整幅主色背景配缓慢漂移的柔光，大标题下放白色命令框，点击按钮复制命令并切换成对勾。适合放在页面末尾做接入引导。
拆自整页模板 器枢 智能体工具接入平台首页，可以单独使用，也能和同一模板拆出的其他组件拼回整页。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Command CTA Band 加进你的项目并换成你的配色。
适用场景
注册、下单、提交表单和落地页的行动号召按钮，需要一个让人愿意点的主操作时。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add command-cta-band
mcp › 使用 8pt MCP 调用 get_component("command-cta-band")
代码
Command CTA Band 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-qcb"><section class="qs-cta" id="start"><div class="qs-cta__glow" aria-hidden="true"></div><div class="qs-wrap"><h2 class="qs-h2">让智能体替你找工具。</h2><p class="qs-cta__sub">先充值，再放手。</p><div ><div class="qs-cmd qs-cmd--light"><span class="qs-cmd__p">$</span><code>接入 https://example.com/skill.md</code><button class="qs-cmd__btn" type="button" aria-label="复制" data-qs-copy="接入 https://example.com/skill.md"><span class="i-copy"><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V6a2 2 0 0 1 2-2h9"/></svg></span><span class="i-ok"><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span></button></div></div></div></section></div>
.x-qcb{--acc:#0016D7;--ink:#1c1c1e;--mut:#6e6e73;--line:#ececee;--soft:#fafafa;
--sans:"Inter","PingFang SC","Hiragino Sans GB","Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif;
--mono:ui-monospace,"SFMono-Regular","JetBrains Mono",Menlo,Consolas,"DejaVu Sans Mono",monospace;
font-family:var(--sans);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.5;width:100%;box-sizing:border-box;text-align:left}.x-qcb *,.x-qcb *::before,.x-qcb *::after{box-sizing:border-box;margin:0;padding:0}.x-qcb a{color:inherit;text-decoration:none}.x-qcb button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}.x-qcb .qs-wrap{max-width:1100px;margin:0 auto;padding:0 24px}.x-qcb .qs-h2{font-size:clamp(30px,4.4vw,52px);font-weight:800;letter-spacing:-.035em;line-height:1.08;text-align:center}.x-qcb .qs-mark{display:inline-grid;grid-template-columns:repeat(2,6px);gap:2px;transform:rotate(45deg);margin:0 2px}.x-qcb .qs-mark i{width:6px;height:6px;border-radius:1.5px;background:currentColor;display:block}.x-qcb .qs-mark i:nth-child(4){opacity:.35}.x-qcb .qs-cmd{display:flex;align-items:center;gap:12px;width:100%;max-width:560px;margin:0 auto;padding:12px 12px 12px 18px;border-radius:10px;font-family:var(--mono);font-size:14px;text-align:left}.x-qcb .qs-cmd code{flex:1;font-family:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.x-qcb .qs-cmd--dark{background:#141416;color:#f2f2f2;box-shadow:0 18px 40px -16px rgba(0,0,0,.45)}.x-qcb .qs-cmd--dark .qs-cmd__p{color:#7c7c84}.x-qcb .qs-cmd--light{background:#fff;color:#1c1c1e;box-shadow:0 18px 40px -14px rgba(0,0,30,.45)}.x-qcb .qs-cmd--light .qs-cmd__p{color:#9a9aa2}.x-qcb .qs-cmd__btn{position:relative;flex:none;width:30px;height:30px;border-radius:7px;background:var(--acc);color:#fff;display:grid;place-items:center;transition:transform .2s}.x-qcb .qs-cmd__btn:hover{transform:scale(1.06)}.x-qcb .qs-cmd__btn:active{transform:scale(.94)}.x-qcb .qs-cmd__btn span{grid-area:1/1;display:grid;transition:opacity .2s,transform .2s}.x-qcb .qs-cmd__btn .i-ok{opacity:0;transform:scale(.6)}.x-qcb .qs-cmd__btn.is-done .i-ok{opacity:1;transform:none}.x-qcb .qs-cmd__btn.is-done .i-copy{opacity:0;transform:scale(.6)}@media (prefers-reduced-motion:reduce){.x-qcb .qs-cmd__btn,.x-qcb .qs-cmd__btn span{transition:none}}.x-qcb .qs-cta{position:relative;overflow:hidden;background:var(--acc) radial-gradient(rgba(255,255,255,.16) 1px,transparent 1.3px) 0 0/18px 18px;color:#fff;padding:104px 0 112px;text-align:center}.x-qcb .qs-cta__glow{position:absolute;inset:0;pointer-events:none}.x-qcb .qs-cta__glow::before,.x-qcb .qs-cta__glow::after{content:"";position:absolute;inset:0}.x-qcb .qs-cta__glow::before{background:radial-gradient(520px 420px at 38% -10%,rgba(255,255,255,.24),transparent 70%)}.x-qcb .qs-cta__glow::after{background:radial-gradient(520px 420px at 64% -10%,rgba(255,255,255,.24),transparent 70%);opacity:0;animation:xqcbGlow 6s ease-in-out infinite alternate}@keyframes xqcbGlow{from{opacity:0}to{opacity:1}}.x-qcb .qs-cta .qs-wrap{position:relative}.x-qcb .qs-cta__sub{color:rgba(255,255,255,.72);font-size:17px;margin:16px 0 32px}@media (max-width:560px){.x-qcb .qs-cta{padding:80px 0}}@media (prefers-reduced-motion:reduce){.x-qcb .qs-cta__glow::after{animation:none}}.x-qcb .qs-cta{padding:120px 0;min-height:min(860px,96vh);display:flex;flex-direction:column;justify-content:center;}
(root) => {
const el = (root.classList && root.classList.contains('x-qcb')) ? root : (root.querySelector('.x-qcb') || root);
const offs = [];
el.querySelectorAll('[data-qs-copy]').forEach((btn) => {
let t = 0;
const on = () => {
const txt = btn.getAttribute('data-qs-copy');
try { if (navigator.clipboard && navigator.clipboard.writeText) navigator.clipboard.writeText(txt).catch(() => {}); } catch (e) {}
btn.classList.add('is-done'); clearTimeout(t); t = setTimeout(() => btn.classList.remove('is-done'), 1400);
};
btn.addEventListener('click', on);
offs.push(() => { btn.removeEventListener('click', on); clearTimeout(t); });
…订阅 Builder 查看完整源码。查看价格