Glow Pill Buttons
介绍
奶油色胶囊主按钮带暖橙外发光与呼吸描边，悬停上浮、箭头右移；搭配深色次按钮与可切换的关注按钮，提供大小两档尺寸。适合深色页面的主行动区。
拆自整页模板 砚白 独立设计师作品集，可以单独使用，也能和同一模板拆出的其他组件拼回整页。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Glow Pill Buttons 加进你的项目并换成你的配色。
适用场景
注册、下单、提交表单和落地页的行动号召按钮，需要一个让人愿意点的主操作时。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add glow-pill-buttons
mcp › 使用 8pt MCP 调用 get_component("glow-pill-buttons")
代码
Glow Pill Buttons 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-gpb"><span class="x-gpb__bd" aria-hidden="true"></span><div class="x-gpb__row"><button type="button" class="x-gpb__glow">发起项目<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M13 6l6 6-6 6"/></svg></button><button type="button" class="x-gpb__ghost">查看报价</button></div><div class="x-gpb__row x-gpb__row--sm"><button type="button" class="x-gpb__glow x-gpb__sm">预约沟通<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M13 6l6 6-6 6"/></svg></button><button type="button" class="x-gpb__ghost x-gpb__sm x-gpb__follow" aria-pressed="false"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="8" r="3.5"/><path d="M3.5 19.5c.8-3.4 3.4-5.5 6.5-5.5s5.7 2.1 6.5 5.5"/><path d="M18.5 8v6"/><path d="M15.5 11h6"/></svg><em>关注</em></button><button type="button" class="x-gpb__ghost x-gpb__sm"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11.5L20 4l-6.5 16-2.5-6.5L4 11.5z"/><path d="M11 13.5L20 4"/></svg>发送需求</button></div><div class="x-gpb__row"><button type="button" class="x-gpb__ico" aria-label="上一张"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 5.5L8 12l6.5 6.5"/></svg></button><button type="button" class="x-gpb__ico" aria-label="播放"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M8 5.5v13l10.5-6.5L8 5.5z"/></svg></button><button type="button" class="x-gpb__ico" aria-label="下一张"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M9.5 5.5L16 12l-6.5 6.5"/></svg></button><button type="button" class="x-gpb__ico x-gpb__ico--hot" aria-label="关闭"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6.5 6.5l11 11"/><path d="M17.5 6.5l-11 11"/></svg></button></div></div>
.x-gpb .x-gpb__glow{position:relative;display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 22px;border:0;border-radius:99px;color:#2a1d12;font:inherit;font-size:14px;font-weight:600;cursor:pointer;background:linear-gradient(180deg,#fff7ec,#f3dcc2);box-shadow:0 0 0 1px rgba(255,214,170,.6),0 0 22px 2px rgba(240,160,90,.45),0 0 60px 6px rgba(240,140,70,.18),inset 0 -2px 6px rgba(200,120,60,.25);isolation:isolate;transition:transform .2s,box-shadow .3s}.x-gpb .x-gpb__glow::before{content:"";position:absolute;inset:-3px;z-index:-1;border-radius:inherit;background:conic-gradient(from 0deg,transparent 0 60%,#ffd2a1 72%,#fff 76%,#f39a52 82%,transparent 92%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:1.5px;opacity:.9;animation:x-gpb-shine 2.8s ease-in-out infinite}.x-gpb .x-gpb__glow:hover{transform:translateY(-1px);box-shadow:0 0 0 1px rgba(255,214,170,.8),0 0 28px 4px rgba(240,160,90,.55),0 0 80px 10px rgba(240,140,70,.22),inset 0 -2px 6px rgba(200,120,60,.25)}.x-gpb .x-gpb__glow svg{width:16px;height:16px;transition:transform .2s}.x-gpb .x-gpb__glow:hover svg{transform:translateX(3px)}@keyframes x-gpb-shine{0%,100%{opacity:.35;filter:blur(0)}50%{opacity:1;filter:blur(.5px)}}.x-gpb .x-gpb__ghost{display:inline-flex;align-items:center;gap:6px;height:48px;padding:0 22px;border:0;border-radius:99px;background:#262321;color:#efe9de;font:inherit;font-size:14px;font-weight:600;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(239,233,222,.09),inset 0 1px 0 rgba(255,255,255,.05);transition:background .2s}.x-gpb .x-gpb__ghost:hover{background:#302c29}.x-gpb{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:30px;width:100%;max-width:1100px;margin:0 auto;padding:210px 24px;border-radius:28px;font-family:"PingFang SC","Noto Sans SC","Noto Sans CJK SC",system-ui,sans-serif;color:#efe9de;position:relative;overflow:hidden;background:#141210;box-shadow:0 0 0 1px rgba(239,233,222,.08)}.x-gpb__bd{position:absolute;inset:-30px;background:radial-gradient(55% 60% at 50% 50%,rgba(240,150,80,.22),transparent 72%),linear-gradient(rgba(18,16,15,.22),rgba(18,16,15,.5)),url(https://8pt.dev/api/media/1a24aa1e7d9544d8f8a6da70.webp) center/cover;filter:blur(1px)}.x-gpb__row{position:relative;z-index:1}.x-gpb *,.x-gpb *::before,.x-gpb *::after{box-sizing:border-box}.x-gpb svg{width:1em;height:1em;flex:none}.x-gpb__row{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}.x-gpb .x-gpb__glow{height:72px;padding:0 38px;font-size:20px;gap:10px}.x-gpb .x-gpb__glow svg{width:20px;height:20px}.x-gpb .x-gpb__ghost{height:72px;padding:0 38px;font-size:20px}.x-gpb__ico{display:grid;place-items:center;width:52px;height:52px;border:0;border-radius:50%;background:#262321;color:#efe9de;font-size:20px;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(239,233,222,.09);transition:background .2s,transform .2s}.x-gpb__ico:hover{background:#322e2a;transform:translateY(-1px)}.x-gpb__ico--hot{color:#2a1d12;background:linear-gradient(180deg,#fff7ec,#f3dcc2);box-shadow:0 0 18px rgba(240,160,90,.45)}.x-gpb .x-gpb__sm{height:50px;padding:0 24px;font-size:15px}.x-gpb__follow em{font-style:normal}.x-gpb__follow[aria-pressed="true"]{color:#f0b07a;box-shadow:inset 0 0 0 1px rgba(240,176,122,.45)}@media (prefers-reduced-motion:reduce){.x-gpb .x-gpb__glow::before{animation:none}.x-gpb .x-gpb__glow,.x-gpb .x-gpb__glow svg{transition:none}}(root) => {
const f = root.querySelector('.x-gpb__follow');
const onF = () => { const on = f.getAttribute('aria-pressed') !== 'true'; f.setAttribute('aria-pressed', String(on)); f.querySelector('em').textContent = on ? '已关注' : '关注'; };
f.addEventListener('click', onF);
return () => f.removeEventListener('click', onF);
}订阅 Builder 查看完整源码。查看价格