按钮
当您需要更多传统操作时，按钮是方便的工具。为此，Foundation 具有许多易于使用的按钮样式，您可以自定义或覆盖它们以满足您的需求。
创建可在所有电子邮件客户端中工作的防弹按钮需要在表格内部嵌套一个表格。在外部 <table> 中添加类 .button。在内部表格中，使用包含您链接的 href 属性添加 <a>。
在 Inky HTML 中，<button> 标记为您创建了所有这些标记。
HTML
<button href="#">Button</button><html>
<head></head>
<body>
<table class="button">
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td><a href="#">Button</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>演示
- 在 `
大小
默认情况下，按钮的大小由按钮中的内容和内边距确定。您还可以根据其父容器调整按钮大小（请参见扩展部分）。
可以通过添加类 .tiny、.small 或 .large 到按钮的外部 <table> 来增大或减小按钮。
在 Inky HTML 中，将相同的类添加到 <button> 标记中。
HTML
<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><html>
<head></head>
<body>
<table class="button tiny">
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td><a href="#">Tiny Button</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="button small">
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td><a href="#">Small Button</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="button">
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td><a href="#">Default Button</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="button large">
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td><a href="#">Large Button</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>演示
别忘了 href="" ;)
展开
要创建一个展开的按钮（容器的全部宽度），将类 .expanded 添加到按钮的外部 <table>，并将 <center> 标记包装在 <a> 周围。
在 Inky HTML 中，将 .expanded 类添加到 <button> 标记。如果您只想在较小尺寸上展开按钮，请添加 .small-expanded。
HTML
<row>
<column>
<button href="#" class="expanded">Expanded Button</button>
<button href="#" class="small-expanded">Expand small only</button>
</column>
</row><html>
<head></head>
<body>
<table class="row">
<tbody>
<tr>
<column>
<table class="button expanded">
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td>
<center><a href="#" align="center" class="float-center">Expanded Button</a></center>
</td>
</tr>
</tbody>
</table>
</td>
<td class="expander"></td>
</tr>
</tbody>
</table>
<table class="button small-expanded">
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td><a href="#">Expand small only</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</column>
</tr>
</tbody>
</table>‍
</body>
</html>演示
着色
通过添加类 .secondary、.success、.warning 或 .alert 到外部 <table>（或 Inky HTML 中的 <button> 标记）来更改按钮的背景颜色。
HTML
<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><html>
<head></head>
<body>
<table class="button secondary">
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td><a href="#">Secondary Button</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="button success">
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td><a href="#">Success Button</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="button warning">
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td><a href="#">Warning Button</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="button alert">
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td><a href="#">Alert Button</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>演示
半径和圆形
通过添加 .radius 或 .rounded 类到按钮中，可以创建具有半径或圆形边缘（如药丸）的按钮。
注意 - Outlook 2000-2013、Yahoo! Mail 和 Android 4+（Gmail）不支持边框半径
注意 - 为了创建 .radius 和 .rounded 按钮，需要删除边框。
HTML
<button href="#" class="radius">Radius</button>
<button href="#" class="rounded">Round</button>
<html>
<head></head>
<body>
<table class="button radius">
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td><a href="#">Radius</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="button rounded">
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td><a href="#">Round</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>演示
Sass 引用
变量
可以使用项目 设置文件 中的这些 Sass 变量来自定义该组件的默认样式。
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
$button-padding |
映射 | tiny: 4px 8px 4px 8px |
不同大小按钮内的填充。 |
$button-font-size |
映射 | tiny: 10px |
不同大小按钮的字体大小。 |
$button-color |
颜色 | $white |
按钮的文本颜色。 |
$button-color-alt |
颜色 | $medium-gray |
浅色背景按钮的文本颜色。 |
$button-font-weight |
粗细 | bold |
按钮的字重。 |
$button-margin |
列表 | 0 0 $global-margin 0 |
按钮周围的边距。 |
$button-background |
颜色 | $primary-color |
按钮的背景颜色。 |
$button-border |
边框 | 2px solid $button-background |
按钮周围的边框。 |
$button-radius |
数字 | $global-radius |
按钮的边框弧度。并非所有电子邮件客户端都支持。 |
$button-rounded |
数字 | $global-rounded |
圆角按钮的边框弧度。并非所有电子邮件客户端都支持。 |
