按钮

当您需要更传统的操作时，按钮是便捷的工具。为此，Foundation 提供了许多易于使用的按钮样式，您可以自定义或覆盖这些样式以满足您的需求。

基础

可以使用最少的标记创建基本按钮。因为按钮可以用于多种用途，所以使用正确的标签很重要。

如果按钮是指向另一个页面的链接或指向页面内锚点的链接，请使用 <a> 标签。通常，锚点不需要 JavaScript 即可工作。
如果按钮执行的操作会更改当前页面上的内容，请使用 <button> 标签。 <button> 元素几乎总是需要 JavaScript 才能运行。

将属性 type="button" 添加到 <button> 元素，除非按钮提交表单，在这种情况下，您应该添加类 `.submit` 并删除 type="button"

<!-- Anchors (links) -->
<a href="about.html" class="button">Learn More</a>
<a href="#features" class="button">View All Features</a>

<!-- Buttons (actions) -->
<button class="submit success button">Save</button>
<button type="button" class="alert button">Delete</button>

了解更多查看所有功能

尺寸

可以向按钮添加其他类以更改其大小和形状。

在视频中观看此部分

<a class="button tiny" href="#">So Tiny</a>
<a class="button small" href="#">So Small</a>
<a class="button" href="#">So Basic</a>
<a class="button large" href="#">So Large</a>
<a class="button expanded" href="#">Such Expand</a>
<a class="button small expanded" href="#">Wow, Small Expand</a>

如此之小如此之小如此基本如此之大如此扩展哇，小扩展

响应式扩展按钮

如果您使用的是 Sass 版本，则可以通过将 $button-responsive-expanded 变量更改为 true 来激活这些额外的响应式按钮扩展类。（默认情况下为 false 以减少 CSS 文件大小。）

对于 CSS 下载用户，您可以在此处获取 CSS 并将其添加到您的样式表中。

<a class="button small small-only-expanded" href="#">Wow, Expand only on small viewport</a>
<a class="button small medium-only-expanded" href="#">Expand only on medium viewport</a>
<a class="button small large-only-expanded" href="#">Expand only on large viewport</a>

<a class="button small medium-expanded" href="#">Wow, Expand on medium and larger</a>
<a class="button small large-expanded" href="#">Expand on large and larger</a>

<a class="button small medium-down-expanded" href="#">Expand on medium and smaller</a>
<a class="button small large-down-expanded" href="#">Expand on large and smaller</a>

哇，仅在小视口中扩展仅在中等视口中扩展仅在大视口中扩展哇，在中等及更大视口中扩展在大及更大视口中扩展在中等及更小视口中扩展在大及更小视口中扩展

着色

添加颜色类以赋予按钮其他含义。

在视频中观看此部分

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

主要次要成功警告警告

自定义颜色

如果您使用的是 Sass 版本的 Foundation，您可以通过编辑设置文件中的 $button-palette 映射来自定义按钮类。按钮调色板默认为 $foundation-palette。

如果您不需要默认调色板中的某些颜色，只需从列表中删除它们即可。

$button-palette: map-remove($foundation-palette, (
    primary,
    secondary
));

或者，您可以向默认调色板添加更多颜色。

$button-palette: map-merge($foundation-palette, (
    purple: #bb00ff
));

或者，您可以定义自己的自定义按钮调色板。

$button-palette: (
    black: #000000,
    red: #ff0000,
    purple: #bb00ff
);

文字颜色

每个按钮类的文本颜色由 $button-color 或 $button-color-alt 决定，以对比度更高的设置变量为准。

默认设置符合 WCAG 2.0 级别 AA 对比度要求。更改颜色变量时，请务必[检查对比度](https://webaim.org/resources/contrastchecker/)。要使所有按钮都具有相同的颜色文本，请将 `$button-color` 和 `$button-color-alt` 设置为相同的值 - 但请注意，这样做可能会降低可访问性。

空心样式

将 .hollow 类添加到按钮以赋予其空心样式。将设置文件中的 $button-fill 变量更改为 hollow 以将其设为默认样式。更改此设置将从您的 CSS 中删除 .hollow 类。

<button class="hollow button" href="#">Primary</button>
<button class="hollow button secondary" href="#">Secondary</button>
<button class="hollow button success" href="#">Success</button>
<button class="hollow button alert" href="#">Alert</button>
<button class="hollow button warning" href="#">Warning</button>
<button class="hollow button" href="#" disabled>Disabled</button>

禁用按钮

.disabled 类将使按钮呈现淡化外观。该类纯粹是一种视觉样式，实际上不会禁用控件。对于 <button> 元素，您可以添加 disabled 属性来同时禁用和设置其样式。如果要禁用链接，则应添加 aria-disabled 属性以将其标记为对辅助技术禁用。

在视频中观看此部分

<a class="button disabled" href="#" aria-disabled>Disabled</a>
<button type="button" class="button primary" disabled>Disabled</button>
<button type="button" class="button secondary" disabled>Disabled</button>
<button type="button" class="button success" disabled>Disabled</button>
<button type="button" class="button alert" disabled>Disabled</button>
<button type="button" class="button warning" disabled>Disabled</button>

禁用

或者，您也可以使用禁用的空心按钮。

<a class="button hollow disabled" href="#" aria-disabled>Disabled</a>
<button type="button" class="button hollow primary" disabled>Disabled</button>
<button type="button" class="button hollow secondary" disabled>Disabled</button>
<button type="button" class="button hollow success" disabled>Disabled</button>
<button type="button" class="button hollow alert" disabled>Disabled</button>
<button type="button" class="button hollow warning" disabled>Disabled</button>

禁用

清除样式

将 .clear 类添加到按钮以赋予其清晰的样式。将设置文件中的 $button-fill 变量更改为 clear 以将其设为默认样式。更改此设置将从您的 CSS 中删除 .clear 类。

在视频中观看此部分

<a class="clear button" href="#">Primary</a>
<a class="clear button secondary" href="#">Secondary</a>
<a class="clear button success" href="#">Success</a>
<a class="clear button alert" href="#">Alert</a>
<a class="clear button warning" href="#">Warning</a>
<a class="clear button" href="#" disabled>Disabled</a>

主要次要成功警告警告禁用

这作为辅助操作按钮特别有用。这样您就可以获得适当的间距和行高。示例

使用 .dropdown 类向按钮添加下拉箭头。

这不会自动添加下拉功能。为此，您可以附加我们的下拉插件。

<button class="dropdown button tiny">Dropdown Button</button>
<button class="dropdown button small">Dropdown Button</button>
<button class="dropdown button">Dropdown Button</button>
<button class="dropdown button large">Dropdown Button</button>
<button class="dropdown button expanded">Dropdown Button</button>

辅助功能

确保按钮的文本具有描述性。如果由于某种原因，您的按钮不包含可读文本（例如，只是一个符号或图标），请向按钮添加仅限屏幕阅读器的文本以阐明其用途。符号或图标应包含在具有属性 aria-hidden="true" 的元素中，以防止屏幕阅读器尝试读出符号。

使用 .show-for-sr 类定义仅限屏幕阅读器的文本。

<button class="button" type="button">
  <!-- Screen readers will see "close" -->
  <span class="show-for-sr">Close</span>
  <!-- Visual users will see the X, but not the "Close" text -->
  <span aria-hidden="true"><i class="fi-x"></i></span>
</button>

Sass 参考

变量

可以使用项目设置文件中的以下 Sass 变量自定义此组件的默认样式。

名称	类型	默认值	描述
`$button-font-family`	字体	`继承`	按钮元素的字体系列。
`$button-font-weight`	字体粗细	`空`	按钮元素的字体粗细。如果为空（默认），则忽略
`$button-padding`	列表	`0.85em 1em`	按钮内的填充。
`$button-margin`	列表	`0 0 $global-margin 0`	按钮周围的边距。
`$button-fill`	关键字	`实心`	按钮的默认填充。可以是 `solid` 或 `hollow`。
`$button-background`	颜色	`$primary-color`	按钮的默认背景颜色。
`$button-background-hover`	颜色	`scale-color($button-background, $lightness: -15%)`	按钮悬停时的背景颜色。
`$button-color`	列表	`$white`	按钮的字体颜色。
`$button-color-alt`	列表	`$black`	按钮的替代字体颜色。
`$button-radius`	数字	`$global-radius`	按钮的边框半径，默认为全局半径。
`$button-border`	列表	`1px solid transparent`	按钮的边框，默认情况下为透明
`$button-hollow-border-width`	数字	`1px`	空心轮廓按钮的边框宽度
`$button-sizes`	地图	`tiny: 0.6rem small: 0.75rem default: 0.9rem large: 1.25rem`	按钮的尺寸。
`$button-palette`	地图	`$foundation-palette`	着色类。要在 CSS 中输出的类映射，例如 `.secondary`、`.success` 等等。
`$button-opacity-disabled`	列表	`0.25`	禁用按钮的不透明度。
`$button-background-hover-lightness`	数字	`-20%`	按钮悬停时的背景颜色亮度。
`$button-hollow-hover-lightness`	数字	`-50%`	空心按钮悬停时的颜色亮度。
`$button-transition`	列表	`background-color 0.25s ease-out, color 0.25s ease-out`	按钮的过渡。
`$button-responsive-expanded`	布尔值	`false`	.expanded 的其他响应类

混合

我们使用这些 mixin 来构建此组件的最终 CSS 输出。您可以自己使用这些 mixin，从我们的组件中构建自己的类结构。

button-expand

@include button-expand($expand);

扩展按钮使其成为全宽。

参数	类型	默认值	描述
`$expand`	布尔值	`true`	设置为 `true` 以启用扩展行为。设置为 `false` 以反转此行为。

button-fill

@include button-fill($fill);

根据 $fill 设置空心或透明按钮填充的基本样式。有关填充样式，请参阅 mixin button-fill-style。

参数	类型	默认值	描述
`$fill`	关键字	`$button-fill`	`hollow` 和 `clear` 之间的填充类型。`solid` 无效。

button-fill-style

@include button-fill-style($fill, $background, $background-hover, $color);

根据 $fill 设置实心/空心/透明按钮填充的视觉样式。有关视觉样式参数的效果，请参阅 mixin button-style、button-hollow-style 和 button-clear-style。

参数	类型	默认值	描述
`$fill`	关键字	`$button-fill`	`hollow` 和 `clear` 之间的填充类型。
`$background`	颜色	`$button-background`	-
`$background-hover`	颜色	`$button-background-hover`	-
`$color`	颜色	`$button-color`	-

button-style

@include button-style($background, $background-hover, $color);

设置按钮的视觉样式。

参数	类型	默认值	描述
`$background`	颜色	`$button-background`	按钮的背景颜色。
`$background-hover`	颜色	`$button-background-hover`	鼠标悬停在按钮上时的背景颜色。设置为 `auto` 可让 mixin 自动生成悬停颜色。
`$color`	颜色	`$button-color`	按钮的文本颜色。设置为 `auto` 以根据背景颜色自动生成颜色。

button-hollow

@include button-hollow;

设置空心按钮的基本样式。有关填充样式，请参阅 mixin button-hollow-style。

button-hollow-style

@include button-hollow-style($color, $hover-lightness, $border-width);

设置空心按钮的视觉样式。

参数	类型	默认值	描述
`$color`	颜色	`$button-background`	按钮的文本和边框颜色。
`$hover-lightness`	颜色	`$button-hollow-hover-lightness`	鼠标悬停时的颜色亮度。
`$border-width`	颜色	`$button-hollow-border-width`	按钮的边框宽度。

button-clear

@include button-clear;

设置透明按钮的基本样式。有关填充样式，请参阅 mixin button-clear-style。

button-clear-style

@include button-clear-style($color, $hover-lightness);

设置透明按钮的视觉样式。

参数	类型	默认值	描述
`$color`	颜色	`$button-background`	按钮的文本颜色。
`$hover-lightness`	颜色	`$button-hollow-hover-lightness`	鼠标悬停时的颜色亮度。

button-disabled

@include button-disabled($opacity);

通过淡化元素并重置光标将禁用样式添加到按钮。

参数	类型	默认值	描述
`$opacity`	数字	`$button-opacity-disabled`	禁用按钮的不透明度。

@include button-dropdown($size, $color, $offset);

向按钮添加下拉箭头。

参数	类型	默认值	描述
`$size`	数字	`0.4em`	箭头的大小。我们建议使用 `em` 值，以便三角形在不同大小的按钮内使用时缩放。
`$color`	颜色	`白色`	箭头的颜色。
`$offset`	数字	`$button-padding`	箭头与按钮文本之间的距离。默认为按钮的右边距。

button

@include button($expand, $background, $background-hover, $color, $style);

添加按钮的所有样式。要更精细地控制样式，请使用单独的按钮 mixin。

参数	类型	默认值	描述
`$expand`	布尔值	`false`	设置为 `true` 以使按钮全宽。
`$background`	颜色	`$button-background`	按钮的背景颜色。
`$background-hover`	颜色	`$button-background-hover`	鼠标悬停在按钮上时的背景颜色。设置为 `auto` 可让 mixin 自动生成悬停颜色。
`$color`	颜色	`$button-color`	按钮的文本颜色。设置为 `auto` 以根据背景颜色自动生成颜色。
`$style`	关键字	`实心`	设置为 `hollow` 以创建空心按钮。`$background` 中定义的颜色将用作按钮的主要颜色。