Foundation for Emails Button 组件完全指南：从 Inky 语法到跨客户端兼容的实战方案

• 前端

本文以 Foundation for Emails 的 Button（按钮）组件为核心，讲解如何用 Inky 的<button>标签与.button类构建在所有邮件客户端（包括 Outlook）中都能稳定渲染的按钮。读完你将掌握按钮的嵌套表格结构、尺寸/颜色/圆角/空心等全部修饰类、href属性的兼容性陷阱，以及背后 scss/components/_button.scss 的源码级原理，可直接复制到自己的邮件模板中实战使用。

按钮的基础结构：为什么是“表格套表格”

邮件客户端对 CSS 的支持参差不齐，想要做出在所有客户端中“防弹”（bullet-proof）的按钮，唯一可靠的做法是使用表格嵌套表格的结构，而不是<a>加 CSS 边框。

正确的做法是：

• 在外层<table>上添加.button类；
• 在内层表格中放入带href属性的<a>标签。

在 Inky 模板语言中，只需一个<button>标签即可自动生成上述全部表格标记：

<button href="#">Button</button>

Inky 会把这一行转换成完整的嵌套表格 HTML，让你免于手写一摞<table>、<tr>、<td>（Inky 支持的完整标签清单见 docs/pages/inky.md）。

两个必须牢记的兼容性要点

• 务必给<button>添加href属性：否则 Outlook.com 在渲染后的邮件中会显示[undefined]字样，破坏邮件观感。
• Office 365 和 Outlook.com 要求 href 中必须是有效 URL：如果暂时没有真实链接，可以使用#占位符（这与测试页 test/visual/pages/button-hollow.html 中的用法一致）。

尺寸控制：tiny / small / default / large

按钮默认由内容和内边距决定宽度（自动收缩），除非显式设置为展开（见下一节 Expanded）。Foundation 提供了四种尺寸类，加到按钮的外层<table>上即可生效：

上表数值来自 scss/settings/_settings.scss 中的$button-padding与$button-font-size两个 Map，以及 scss/components/_button.scss 中table.button.tiny/small/large的样式块。注意.tiny会额外把字重降为normal，其余尺寸均为bold（$button-font-weight）。

在 Inky 中，把同样的类加到<button>标签上即可：

<button href="#" class="tiny">Tiny Button</button> <button href="#" class="small">Small Button</button> <button href="#">Default Button</button> <button href="#" class="large">Large Button</button>

别忘了href——无论哪种尺寸，这既是点击跳转的必需属性，也是规避 Outlook.com[undefined]问题的关键。

Expanded：让按钮占满容器宽度

默认按钮的宽度由内容撑开。若想让按钮占满其父容器整行宽度，需要两步：

1. 在外层<table>上加.expanded类；
2. 在<a>外面包一层<center>标签（Inky 中同样加类即可）。

<row> <column> <button href="#" class="expanded">Expanded Button</button> <button href="#" class="small-expanded">Expand small only</button> </column> </row>

源码层面，scss/components/_button.scss 中table.button.expand, table.button.expanded会同时把外层表格、内层表格和<a>的宽度设为 100%，并将文本居中对齐、清除左右内边距，同时把<center>的min-width归零，确保在窄容器中也能正确铺满。.expand是.expanded的等价别名（scss/grid/_grid.scss 中网格容器内的按钮也有同样的expand/expanded处理）。

small-expanded：仅在小屏展开

.small-expanded（等价别名.small-expanded与.small-expand）只在小屏断点以下生效：媒体查询内会把按钮强制拉宽至 100%、文本居中并清除左右内边距，而桌面端保持原有宽度。实现见 scss/components/_media-query.scss。这在移动端优先的邮件布局中非常实用——桌面端保持紧凑，手机端整行可点。

颜色方案：secondary / success / warning / alert

按钮背景色默认使用主题主色$primary-color。通过在外层<table>（或 Inky 的<button>）上追加以下类，可以快速切换语义色：

<button href="#" class="secondary">Secondary Button</button> <button href="#" class="success">Success Button</button> <button href="#" class="warning">Warning Button</button> <button href="#" class="alert">Alert Button</button>

各颜色在 scss/settings/_settings.scss 中的默认值：

这些类在 scss/components/_button.scss 中分别重写了td的背景色、<a>的边框色，并定义了 hover 状态——hover 时背景色会通过color.adjust(..., $lightness: -10%)整体加深 10% 亮度（secondary则是提亮 10%，见$button-secondary-background-hover）。若主题色被自定义覆盖，按钮颜色会自动跟随，无需改组件代码。

圆角与胶囊：radius / rounded

追加.radius或.rounded类即可分别获得小圆角与胶囊（pill）状按钮：

<button href="#" class="radius">Radius</button> <button href="#" class="rounded">Round</button>

两个值得注意的前提：

• border-radius在 Outlook 2000–2013、Yahoo! Mail 和 Android 4+（Gmail）中不受支持，这些客户端里按钮会退化为直角，这是邮件开发的客观限制；
• 创建.radius/.rounded按钮时必须移除边框。源码中正是这样实现的：scss/components/_button.scss 里&.radius table td与&.rounded table td会设置border-radius并强制border: none。

圆角半径取自全局变量：$button-radius: $global-radius（默认3px）、$button-rounded: $global-rounded（默认500px，足以把任意高度的按钮变成胶囊），均可在 scss/settings/_settings.scss 中调整。

Hollow 空心按钮：只留描边与文字

.hollow类可以把按钮变成透明背景、仅保留文字颜色与描边的线框样式，并且可以与前面所有类自由组合，实现“混搭”：

<button href="#" class="hollow">Hollow Button</button> <button href="#" class="hollow secondary radius">Secondary Button</button> <button href="#" class="hollow success round">Success Button</button> <button href="#" class="hollow warning tiny">Warning Button</button> <button href="#" class="hollow alert expanded">Alert Button</button>

源码层面，scss/components/_button.scss 定义了一个hollow-button($color, $class)的 Sass mixin：它会把td的背景强制设为transparent、清空边框与圆角，然后为<a>应用1px solid的描边和同色文字；hover 时描边与文字均加深 10% 亮度。mixin 依次为primary、secondary、alert、warning、success五套色系生成了.hollow.secondary、.hollow.alert等组合规则，且.hollow.radius、.hollow.rounded会重新为<a>应用对应圆角——所以空心按钮同样可以叠加圆角或胶囊效果。

实战验证与扩展组合

仓库提供了覆盖上述全部特性的视觉回归测试页，可直接查看真实渲染效果：

• test/visual/pages/button-inky.html：覆盖 tiny/small/default/large 四种尺寸、五种颜色、.expand、.small-expand、.radius/.rounded与.hollow的完整组合；
• test/visual/pages/button-expanded-inky.html：验证.expanded在不同列宽（3/9、4/8、6/6 等）下的铺满效果，以及按钮嵌套在 callout 中的场景；
• test/visual/pages/button-hollow.html：验证 hollow 与round、radius、expanded叠加后的线框按钮。

例如，把展开、圆角与社交场景结合（参考 button-expanded 测试页中的 Facebook/Twitter/Google 按钮写法），可以写出这样的全宽圆角 CTA：

<button class="expanded radius" href="#">立即注册</button> <button class="hollow expanded rounded secondary" href="#">了解更多</button>

小结

Foundation for Emails 的 Button 组件通过“外层表格加.button类、内层表格放带href的<a>”这一固定结构，绕开了邮件客户端对 CSS 支持的种种限制。日常使用只需记住：尺寸用tiny/small/large，铺满用expanded（小屏专用small-expanded），配色用secondary/success/warning/alert，圆角用radius/rounded，线框用hollow，且所有修饰类均可自由叠加。所有样式变量的默认值都集中在 scss/settings/_settings.scss 的“5. Button”区块，改主题时优先从这里入手，组件代码无需任何改动即可跟随新主题。

• 前端