Glow Pill Buttons
Overview
A cream pill primary button with a warm orange outer glow and breathing outline that lifts on hover while the arrow moves right, paired with a dark secondary button and a toggleable follow button, in two sizes. Made for the main action on dark pages.
Taken from the page template Yanbai Independent Designer Portfolio. 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 Glow Pill Buttons 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 glow-pill-buttons
mcp › Use 8pt MCP to call get_component("glow-pill-buttons")
Code
Source for Glow Pill Buttons. Motion uses only transform and opacity and respects the Reduce motion setting.
<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);
}Subscribe to Builder to see the full source.See pricing