Foundation 按钮（Button） - Foundation教程

一、按钮样式概述

Foundation 提供了 6 种按钮配色方案，通过不同的类来实现：

类名	说明	默认颜色
`.button`	基础按钮（必选）	蓝色
`.secondary`	次要按钮	灰色
`.success`	成功/确认按钮	绿色
`.info`	信息按钮	浅蓝色
`.warning`	警告按钮	黄色/橙色
`.alert`	危险/警告按钮	红色

二、六种颜色按钮示例

<button type="button" class="button">Default</button>
<button type="button" class="button secondary">Secondary</button>
<button type="button" class="button success">Success</button>
<button type="button" class="button info">Info</button>
<button type="button" class="button warning">Warning</button>
<button type="button" class="button alert">Alert</button>Code language: HTML, XML (xml)

三、按钮类适用于多种元素

.button 类不仅可以用于 <button>，还可以用于 <a> 和 <input> 元素：

<a href="#" class="button info" role="button">Link Button</a>
<button type="button" class="button info">Button</button>
<input type="button" class="button info" value="Input Button">
<input type="submit" class="button info" value="Submit Button">Code language: HTML, XML (xml)

四、按钮尺寸

使用 .large、.small、.tiny 类控制按钮大小：

<button type="button" class="button large">Large</button>
<button type="button" class="button">Default</button>
<button type="button" class="button small">Small</button>
<button type="button" class="button tiny">Tiny</button>Code language: HTML, XML (xml)

五、圆角按钮

使用 .radius（圆角）和 .round（椭圆/全圆角）类：

<button type="button" class="button">Default Button</button>
<button type="button" class="button radius">Radius Button</button>
<button type="button" class="button round">Round Button</button>Code language: HTML, XML (xml)

六、全宽按钮（100% 宽度）

使用 .expand 类使按钮占满父容器宽度：

<button type="button" class="button">Default Button</button>
<button type="button" class="button expand">Expanded Button</button>Code language: HTML, XML (xml)

七、禁用状态按钮

使用 .disabled 类使按钮呈现不可点击样式：

<button type="button" class="button">Default Button</button>
<button type="button" class="button disabled">Disabled Button</button>Code language: HTML, XML (xml)

注意：.disabled 仅改变视觉样式。如果需要在 <a> 或 <button> 上真正禁用点击行为，还需添加 disabled 属性或 JavaScript 控制。

八、完整可运行示例

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Foundation 按钮示例</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="foundation-5.5.3/css/foundation.css" rel="stylesheet" />
    <script src="foundation-5.5.3/js/vendor/jquery.js"></script>
    <script src="foundation-5.5.3/js/foundation.min.js"></script>
    <script src="foundation-5.5.3/js/vendor/modernizr.js"></script>
    <script>
        $(document).ready(function () {
            $(document).foundation();
        })
    </script>
    <style>
        .button {
            margin-bottom: 10px;
        }
    </style>
</head>
<body>

<div class="row">
    <div class="medium-12 columns">

        <h3>六种颜色按钮</h3>
        <button type="button" class="button">Default</button>
        <button type="button" class="button secondary">Secondary</button>
        <button type="button" class="button success">Success</button>
        <button type="button" class="button info">Info</button>
        <button type="button" class="button warning">Warning</button>
        <button type="button" class="button alert">Alert</button>

        <hr />

        <h3>不同元素上的按钮</h3>
        <a href="#" class="button info" role="button">Link Button</a>
        <button type="button" class="button info">Button</button>
        <input type="button" class="button info" value="Input Button">
        <input type="submit" class="button info" value="Submit Button">

        <hr />

        <h3>按钮尺寸</h3>
        <button type="button" class="button large">Large</button>
        <button type="button" class="button">Default</button>
        <button type="button" class="button small">Small</button>
        <button type="button" class="button tiny">Tiny</button>

        <hr />

        <h3>圆角按钮</h3>
        <button type="button" class="button">Default Button</button>
        <button type="button" class="button radius">Radius Button</button>
        <button type="button" class="button round">Round Button</button>

        <hr />

        <h3>全宽按钮</h3>
        <button type="button" class="button">Default Button</button>
        <button type="button" class="button expand">Expanded Button</button>

        <hr />

        <h3>禁用状态</h3>
        <button type="button" class="button">Default Button</button>
        <button type="button" class="button disabled">Disabled Button</button>

    </div>
</div>

</body>
</html>Code language: HTML, XML (xml)

九、小结

功能	类名
基础按钮	`.button`
颜色变体	`.secondary` `.success` `.info` `.warning` `.alert`
尺寸	`.large` `.small` `.tiny`
圆角	`.radius` `.round`
全宽	`.expand`
禁用样式	`.disabled`

按钮类可用于 <a>、<button>、<input>
多个类可组合使用，例如：.button .large .radius .success

Previous: Foundation 表格样式

Next: Foundation 按钮组与下拉菜单按钮