垦荒学园

简体中文

English

简体中文

English

切换主题

Foundation 按钮 ​

Foundation 提供了丰富的按钮样式，从基础按钮到各种变体，满足不同的设计需求。本章将详细介绍 Foundation 按钮的使用方法。

基本按钮 ​

创建按钮只需添加 .button 类：

html
<!-- 链接按钮 -->
<a class="button" href="#">链接按钮</a>

<!-- 按钮元素 -->
<button class="button" type="button">按钮元素</button>

<!-- 提交按钮 -->
<input class="button" type="submit" value="提交按钮">

按钮颜色 ​

Foundation 提供了多种预定义的按钮颜色：

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

颜色说明 ​

类名用途颜色
.primary主要操作蓝色
.secondary次要操作灰色
.success成功/确认绿色
.warning警告/注意黄色
.alert危险/删除红色

按钮尺寸 ​

Foundation 提供了四种按钮尺寸：

html
<a class="button tiny" href="#">Tiny 按钮</a>
<a class="button small" href="#">Small 按钮</a>
<a class="button" href="#">默认按钮</a>
<a class="button large" href="#">Large 按钮</a>

尺寸类 ​

类名说明
.tiny超小号按钮
.small小号按钮
（默认）标准尺寸
.large大号按钮

扩展按钮 ​

使用 .expanded 类创建全宽按钮：

html
<a class="button expanded" href="#">全宽按钮</a>
<a class="button large expanded" href="#">大号全宽按钮</a>

空心按钮（Hollow） ​

使用 .hollow 类创建边框按钮：

html
<a class="button hollow" href="#">空心按钮</a>
<a class="button hollow primary" href="#">Primary 空心</a>
<a class="button hollow secondary" href="#">Secondary 空心</a>
<a class="button hollow success" href="#">Success 空心</a>
<a class="button hollow warning" href="#">Warning 空心</a>
<a class="button hollow alert" href="#">Alert 空心</a>

清除样式按钮（Clear） ​

使用 .clear 类创建透明背景按钮：

html
<a class="button clear" href="#">清除按钮</a>
<a class="button clear primary" href="#">Primary 清除</a>
<a class="button clear secondary" href="#">Secondary 清除</a>
<a class="button clear success" href="#">Success 清除</a>
<a class="button clear warning" href="#">Warning 清除</a>
<a class="button clear alert" href="#">Alert 清除</a>

禁用按钮 ​

使用 .disabled 类或 disabled 属性禁用按钮：

html
<!-- 使用类 -->
<a class="button disabled" href="#">禁用的链接按钮</a>

<!-- 使用属性 -->
<button class="button" type="button" disabled>禁用的按钮</button>

圆角按钮 ​

Foundation 6 默认按钮有轻微圆角。可以通过自定义 CSS 调整：

html
<style>
    .button.rounded {
        border-radius: 50px;
    }
    .button.square {
        border-radius: 0;
    }
</style>

<a class="button rounded" href="#">圆角按钮</a>
<a class="button square" href="#">方角按钮</a>

带图标的按钮 ​

结合图标库使用按钮：

html
<!-- 使用 Foundation Icons -->
<a class="button">
    <i class="fi-home"></i> 首页
</a>

<!-- 使用 Font Awesome -->
<a class="button">
    <i class="fa fa-download"></i> 下载
</a>

<!-- 只有图标 -->
<a class="button" aria-label="设置">
    <i class="fa fa-cog"></i>
</a>

下拉按钮 ​

带下拉菜单的按钮：

html
<div class="dropdown-pane" id="example-dropdown" data-dropdown data-auto-focus="true">
    <ul class="menu vertical">
        <li><a href="#">选项 1</a></li>
        <li><a href="#">选项 2</a></li>
        <li><a href="#">选项 3</a></li>
    </ul>
</div>

<button class="button dropdown" type="button" data-toggle="example-dropdown">
    下拉按钮
</button>

下拉箭头 ​

使用 .dropdown 类添加下拉箭头：

html
<a class="button dropdown" href="#">带箭头的按钮</a>

分割按钮 ​

将按钮分割为主按钮和下拉触发器：

html
<div class="button-group">
    <a class="button">主要操作</a>
    <button class="dropdown button arrow-only" data-toggle="example-dropdown-2">
        <span class="show-for-sr">显示更多选项</span>
    </button>
</div>

<div class="dropdown-pane" id="example-dropdown-2" data-dropdown>
    <ul class="menu vertical">
        <li><a href="#">备选操作 1</a></li>
        <li><a href="#">备选操作 2</a></li>
    </ul>
</div>

关闭按钮 ​

用于关闭模态框、提醒框等：

html
<button class="close-button" aria-label="关闭" type="button">
    <span aria-hidden="true">&times;</span>
</button>

关闭按钮位置 ​

html
<div class="callout" data-closable style="position: relative;">
    <button class="close-button" aria-label="关闭提醒框" type="button" data-close>
        <span aria-hidden="true">&times;</span>
    </button>
    <p>这是一个可关闭的提醒框。</p>
</div>

按钮加载状态 ​

自定义加载中的按钮：

html
<style>
    .button.loading {
        position: relative;
        pointer-events: none;
    }
    .button.loading::after {
        content: "";
        position: absolute;
        width: 16px;
        height: 16px;
        margin-left: 10px;
        border: 2px solid #fff;
        border-radius: 50%;
        border-top-color: transparent;
        animation: spin 0.8s linear infinite;
    }
    @keyframes spin {
        to { transform: rotate(360deg); }
    }
</style>

<button class="button loading" type="button">加载中...</button>

响应式按钮 ​

针对不同屏幕尺寸调整按钮：

html
<!-- 小屏幕全宽，大屏幕自适应 -->
<a class="button small-expanded large-shrink" href="#">响应式按钮</a>

<!-- 不同屏幕不同尺寸 -->
<a class="button small-only-expanded" href="#">小屏幕全宽</a>

完整示例 ​

html
<!DOCTYPE html>
<html class="no-js" lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foundation 按钮示例</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
        .button-demo { margin-bottom: 20px; }
        .button-demo .button { margin-right: 5px; margin-bottom: 5px; }
    </style>
</head>
<body>
    <div class="grid-container">
        <h1>Foundation 按钮展示</h1>

        <h2>按钮颜色</h2>
        <div class="button-demo">
            <a class="button primary" href="#">Primary</a>
            <a class="button secondary" href="#">Secondary</a>
            <a class="button success" href="#">Success</a>
            <a class="button warning" href="#">Warning</a>
            <a class="button alert" href="#">Alert</a>
        </div>

        <h2>按钮尺寸</h2>
        <div class="button-demo">
            <a class="button tiny" href="#">Tiny</a>
            <a class="button small" href="#">Small</a>
            <a class="button" href="#">Default</a>
            <a class="button large" href="#">Large</a>
        </div>

        <h2>空心按钮</h2>
        <div class="button-demo">
            <a class="button hollow primary" href="#">Primary</a>
            <a class="button hollow secondary" href="#">Secondary</a>
            <a class="button hollow success" href="#">Success</a>
            <a class="button hollow warning" href="#">Warning</a>
            <a class="button hollow alert" href="#">Alert</a>
        </div>

        <h2>带图标按钮</h2>
        <div class="button-demo">
            <a class="button" href="#"><i class="fas fa-home"></i> 首页</a>
            <a class="button success" href="#"><i class="fas fa-check"></i> 确认</a>
            <a class="button alert" href="#"><i class="fas fa-trash"></i> 删除</a>
            <a class="button secondary" href="#"><i class="fas fa-cog"></i> 设置</a>
        </div>

        <h2>全宽按钮</h2>
        <div class="button-demo">
            <a class="button expanded" href="#">全宽按钮</a>
            <a class="button success expanded" href="#">全宽成功按钮</a>
        </div>

        <h2>禁用按钮</h2>
        <div class="button-demo">
            <a class="button disabled" href="#">禁用按钮</a>
            <button class="button" disabled>禁用按钮</button>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/js/foundation.min.js"></script>
    <script>$(document).foundation();</script>
</body>
</html>

按钮最佳实践 ​

  1. 语义化使用：对于表单提交使用 <button>，导航使用 <a>
  2. 清晰的文案：按钮文字应该清晰表达操作意图
  3. 合适的颜色：根据操作重要性选择合适的颜色
  4. 可访问性：为图标按钮添加 aria-label
  5. 反馈状态：提供悬停、点击、禁用等状态反馈
html
<!-- 良好的按钮示例 -->
<button class="button success" type="submit">
    <i class="fa fa-save" aria-hidden="true"></i>
    保存更改
</button>

<!-- 图标按钮的可访问性 -->
<button class="button" type="button" aria-label="删除项目">
    <i class="fa fa-trash" aria-hidden="true"></i>
</button>

总结 ​

本章我们学习了：

  • 基本按钮的创建
  • 按钮颜色和尺寸
  • 空心和清除样式按钮
  • 全宽和禁用按钮
  • 带图标的按钮
  • 下拉按钮和分割按钮
  • 按钮的最佳实践

下一章，我们将学习 Foundation 按钮组。

提示：按钮是用户交互的重要元素，确保按钮在各种设备上都易于点击（建议最小点击区域为 44x44 像素）。