Closing CTA Footer
Overview
A two-line closing headline in a gray subline plus green emphasis with a black button, over a slowly breathing green glow. Below, a three-column hairline footer with an industry directory in two columns in the middle and copyright and terms in the bottom row.
Taken from the page template Chaoyin Lead-Gen Agent Website. 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 Closing CTA Footer to your project in your colors.
Where to use it
Site headers, tab switches, segmented controls, side navigation and footers.
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 closing-cta-footer
mcp › Use 8pt MCP to call get_component("closing-cta-footer")
Code
Source for Closing CTA Footer. Motion uses only transform and opacity and respects the Reduce motion setting.
<div class="x-ccf"><section class="cy-end" id="start"><div class="cy-end__glow"></div><h2><span>这类承诺你听过太多次</span>这一次，<em>它真的跑得通</em></h2><a class="cy-btn" href="#hero">领取体验额度试一试<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="m13 6 6 6-6 6"/></svg></a></section><footer class="cy-ft" id="footer"><div class="cy-wrap"><div class="cy-ft__g"> <div><h4>产品与获客工具</h4><ul><li><a href="#hero">获客智能体</a></li><li><a href="#footer">企业名录库</a><span class="cy-tag">新</span></li><li><a href="#footer">地图商户数据集</a></li><li><a href="#footer">细分市场探索</a></li></ul> <div class="cy-ft__brand" style="margin-top:28px"><a class="cy-logo" href="#top" aria-label="潮引"><svg class="cy-logo__m" viewBox="0 0 28 28" aria-hidden="true"><circle cx="13" cy="15" r="9.5" fill="none" stroke="#C9C7C2" stroke-width="3"/><path d="M13 5.5a9.5 9.5 0 0 1 9.5 9.5" fill="none" stroke="#111" stroke-width="3" stroke-linecap="round"/><circle cx="22.5" cy="5.5" r="3.2" fill="#0D9467"/></svg><span>潮引</span></a><p>全天候工作的获客智能体，替你找到对的人。</p></div></div> <div><h4>行业名录</h4><ul class="cy-ft__two"><li><a href="#footer">华东企业</a></li><li><a href="#footer">华南企业</a></li><li><a href="#footer">华北企业</a></li><li><a href="#footer">西南企业</a></li><li><a href="#footer">东南亚企业</a></li><li><a href="#footer">中东企业</a></li><li><a href="#footer">欧洲企业</a></li><li><a href="#footer">北美企业</a></li><li><a href="#footer">拉美企业</a></li><li><a href="#footer">大洋洲企业</a></li></ul></div> <div><h4>资源</h4><ul><li><a href="#footer">关于我们</a></li><li><a href="#pricing">价格</a></li><li><a href="#footer">合作伙伴计划</a></li><li><a href="#footer">接口文档</a></li><li><a href="#faq">合规问答</a></li><li><a href="#footer">联系 hello@example.com</a></li></ul></div></div> <div class="cy-ft__bot"><span>© 2026 潮引 · 虚构品牌示例</span><nav><a href="#footer">使用条款</a><span>|</span><a href="#footer">隐私政策</a></nav></div></div></footer></div>
.x-ccf{--bg:#F6F5F3;--ink:#111111;--acc:#0D9467;--chip:#ECEBE9;--card:#FFFFFF;--mut:#8E8D8A;--sub:#5F5E5B;--line:#E7E5E1;--tile:#F4F4F3;
--sans:"Inter","PingFang SC","Hiragino Sans GB","Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif;--ease:cubic-bezier(.22,1,.36,1)}.x-ccf *,.x-ccf *::before,.x-ccf *::after{box-sizing:border-box;margin:0;padding:0}.x-ccf{width:100%;text-align:left;font-family:var(--sans);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:clip}.x-ccf a{color:inherit;text-decoration:none}.x-ccf button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}.x-ccf input{font:inherit;color:inherit}.x-ccf .cy-wrap{max-width:1080px;margin:0 auto;padding:0 24px}.x-ccf .cy-h2{font-size:clamp(28px,3vw,38px);font-weight:500;letter-spacing:-.02em;line-height:1.2;text-align:center}.x-ccf .cy-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 24px;border-radius:10px;background:#161616;color:#fff;font-size:15px;font-weight:500;transition:transform .2s var(--ease),background .2s}.x-ccf .cy-btn:hover{background:#2b2b2b}.x-ccf .cy-btn:active{transform:scale(.98)}.x-ccf .cy-btn svg{width:16px;height:16px;transition:transform .25s var(--ease)}.x-ccf .cy-btn:hover svg{transform:translateX(3px)}.x-ccf .cy-logo{display:inline-flex;align-items:center;gap:8px;font-size:20px;font-weight:600;letter-spacing:.02em}.x-ccf .cy-logo__m{width:26px;height:26px}.x-ccf .cy-tag{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:999px;background:var(--chip);color:var(--sub);font-size:11px;font-weight:500}@media (prefers-reduced-motion:reduce){.x-ccf *,.x-ccf *::before,.x-ccf *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.x-ccf .cy-m{display:none}}.x-ccf .cy-end{position:relative;padding:90px 24px 110px;text-align:center;overflow:hidden}.x-ccf .cy-end__glow{position:absolute;left:50%;top:50%;width:560px;height:300px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(13,148,103,.14),transparent);animation:xccfGlow 6s ease-in-out infinite;pointer-events:none}@keyframes xccfGlow{50%{transform:translate(-50%,-50%) scale(1.15);opacity:.6}}.x-ccf .cy-end h2{position:relative;font-size:clamp(32px,3.8vw,48px);font-weight:500;letter-spacing:-.03em;line-height:1.18}.x-ccf .cy-end h2 span{display:block;color:var(--mut)}.x-ccf .cy-end h2 em{font-style:normal;color:var(--acc)}.x-ccf .cy-end .cy-btn{position:relative;margin-top:34px}@media (max-width:760px){.x-ccf .cy-end{padding:56px 18px 72px}.x-ccf .cy-end__glow{width:320px}}.x-ccf .cy-ft{border-top:1px solid var(--line);padding:56px 0 40px;font-size:14px}.x-ccf .cy-ft__g{display:grid;grid-template-columns:1fr 2fr 1fr;gap:32px}.x-ccf .cy-ft h4{font-size:14px;font-weight:600;color:#5a5956;margin-bottom:14px}.x-ccf .cy-ft ul{list-style:none;display:grid;gap:9px}.x-ccf .cy-ft__two{display:grid;grid-template-columns:1fr 1fr;gap:9px 32px}.x-ccf .cy-ft li a{color:#7B7A77;transition:color .2s}.x-ccf .cy-ft li a:hover{color:var(--ink)}.x-ccf .cy-ft li .cy-tag{margin-left:6px;height:18px;font-size:10.5px;background:#ECEBE9}.x-ccf .cy-ft__brand p{margin-top:12px;color:#7B7A77;font-size:13.5px;line-height:1.6;max-width:240px}.x-ccf .cy-ft__bot{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:48px;padding-top:22px;border-top:1px solid var(--line);font-size:13px;color:#7B7A77}.x-ccf .cy-ft__bot nav{display:flex;gap:14px}.x-ccf .cy-ft__bot a:hover{color:var(--ink)}@media (max-width:760px){.x-ccf .cy-ft{padding:40px 0 32px}.x-ccf .cy-ft__g{grid-template-columns:1fr;gap:28px}.x-ccf .cy-ft__bot{flex-direction:column;align-items:flex-start;margin-top:32px}}.x-ccf{min-height:min(860px,96vh);display:flex;flex-direction:column;justify-content:center;}.x-ccf .cy-end{padding:60px 24px 70px}.x-ccf .cy-ft{padding:44px 0 30px}Subscribe to Builder to see the full source.See pricing