Command CTA Band
Overview
A full accent-color background with slowly drifting soft light; a white command box under the headline, and clicking the button copies the command and turns into a check. Made for an end-of-page setup prompt.
Taken from the page template Qishu Agent Tool Platform Home. Use it on its own, or combine it with the other components from the same template to rebuild the full page.
Plain HTML, CSS and a little vanilla JS, with no framework dependency. Copy the prompt into Claude Code, Cursor, Trae or Codex and the model adds Command CTA Band to your project in your colors.
Where to use it
Call-to-action buttons for sign-ups, checkout, form submission and landing pages, whenever you need a primary action people want to click.
Install
With Builder, install it with the 8pt CLI or call it directly from an editor connected to 8pt MCP.
$ npm i -g @8pt-dev/cli && 8pt add command-cta-band
mcp › Use 8pt MCP to call get_component("command-cta-band")
Code
Source for Command CTA Band. Motion uses only transform and opacity and respects the Reduce motion setting.
<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); });
…Subscribe to Builder to see the full source.See pricing