BUTTON
胶囊按钮Pill Button
圆角拉满到 999px 的按钮，圆润友好，是消费级产品的默认选择。
效果预览
适合用在哪
年轻化品牌、社交产品、营销落地页的主 CTA。
容易踩的坑
- 沿用矩形按钮的内边距，半圆端点让文字显得挤在中间，左右至少要多加 4px。
- 胶囊主按钮与 8px 圆角的输入框、卡片混用，同一页面圆角语言割裂、显得廉价。
- 按钮高度低于 44px 时半圆端点占比过大，移动端点击热区也不达标。
设计提示词 · Prompt
胶囊按钮（Pill Button）：border-radius:999px，其余与常规按钮一致——高 44-52px、左右内边距 26-32px、字重 600、字号 15-16px。因为两端是半圆，文字与端点的视觉距离比矩形按钮更远，内边距要在常规基础上加 4-6px 才平衡。主 CTA 用深色或品牌渐变实心，次按钮用白底 + 1.5px 描边。整组按钮若一个胶囊、一个矩形会很难受——同一页面的按钮圆角语言必须统一。
Pill Button: border-radius:999px, otherwise identical to regular buttons — height 44-52px, horizontal padding 26-32px, font weight 600, font size 15-16px. Because both ends are semicircles, the visual distance between text and ends is larger than in a rectangular button, so add 4-6px to the regular padding to balance it. The primary CTA uses a solid dark fill or brand gradient; the secondary button uses a white background + 1.5px border. A group mixing one pill and one rectangle looks awkward — button corner language must be consistent across the same page.
常见搭配
同一页面里经常和「胶囊按钮」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-pillwrap"> <button class="d-btn d-btn--p d-btn--pill">立即免费开始</button> <button class="d-btn d-btn--g d-btn--pill">了解更多</button> </div>