Kenhuang Academy
  • English

      • Foundation Buttons

      Foundation provides rich button styles, from basic buttons to various variants, meeting different design needs. This chapter will detail the usage of Foundation buttons.

      Basic Buttons

      Creating a button only requires adding the .button class:

      <!-- Link button -->
<a class="button" href="#">Link Button</a>

<!-- Button element -->
<button class="button" type="button">Button Element</button>

<!-- Submit button -->
<input class="button" type="submit" value="Submit Button">

      Button Colors

      Foundation provides multiple predefined button colors:

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

      Color Description

      Class NamePurposeColor
      .primaryPrimary actionBlue
      .secondarySecondary actionGray
      .successSuccess/ConfirmGreen
      .warningWarning/AttentionYellow
      .alertDanger/DeleteRed

      Button Sizes

      Foundation provides four button sizes:

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

      Size Classes

      Class NameDescription
      .tinyExtra small button
      .smallSmall button
      (Default)Standard size
      .largeLarge button

      Expanded Buttons

      Use the .expanded class to create full-width buttons:

      <a class="button expanded" href="#">Full Width Button</a>
<a class="button large expanded" href="#">Large Full Width Button</a>

      Hollow Buttons

      Use the .hollow class to create outlined buttons:

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

      Clear Style Buttons

      Use the .clear class to create transparent background buttons:

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

      Disabled Buttons

      Use the .disabled class or disabled attribute to disable buttons:

      <!-- Using class -->
<a class="button disabled" href="#">Disabled Link Button</a>

<!-- Using attribute -->
<button class="button" type="button" disabled>Disabled Button</button>

      Rounded Buttons

      Foundation 6 default buttons have slight rounded corners. Can be adjusted via custom CSS:

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

<a class="button rounded" href="#">Rounded Button</a>
<a class="button square" href="#">Square Button</a>

      Buttons with Icons

      Combine with icon libraries to use buttons:

      <!-- Using Foundation Icons -->
<a class="button">
    <i class="fi-home"></i> Home
</a>

<!-- Using Font Awesome -->
<a class="button">
    <i class="fa fa-download"></i> Download
</a>

<!-- Icon only -->
<a class="button" aria-label="Settings">
    <i class="fa fa-cog"></i>
</a>

      Buttons with dropdown menus:

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

<button class="button dropdown" type="button" data-toggle="example-dropdown">
    Dropdown Button
</button>

      Use the .dropdown class to add a dropdown arrow:

      <a class="button dropdown" href="#">Button with Arrow</a>

      Split Buttons

      Split buttons into main button and dropdown trigger:

      <div class="button-group">
    <a class="button">Main Action</a>
    <button class="dropdown button arrow-only" data-toggle="example-dropdown-2">
        <span class="show-for-sr">Show more options</span>
    </button>
</div>

<div class="dropdown-pane" id="example-dropdown-2" data-dropdown>
    <ul class="menu vertical">
        <li><a href="#">Alternative Action 1</a></li>
        <li><a href="#">Alternative Action 2</a></li>
    </ul>
</div>

      Close Button

      For closing modals, alerts, etc.:

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

      Close Button Position

      <div class="callout" data-closable style="position: relative;">
    <button class="close-button" aria-label="Close Alert" type="button" data-close>
        <span aria-hidden="true">&times;</span>
    </button>
    <p>This is a closable alert box.</p>
</div>

      Button Loading State

      Customize buttons in loading state:

      <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">Loading...</button>

      Responsive Buttons

      Adjust buttons for different screen sizes:

      <!-- Full width on small screens, auto on large screens -->
<a class="button small-expanded large-shrink" href="#">Responsive Button</a>

<!-- Different sizes on different screens -->
<a class="button small-only-expanded" href="#">Full Width on Small</a>

      Complete Example

      <!DOCTYPE html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foundation Button Examples</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 Button Showcase</h1>

        <h2>Button Colors</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>Button Sizes</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>Hollow Buttons</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>Buttons with Icons</h2>
        <div class="button-demo">
            <a class="button" href="#"><i class="fas fa-home"></i> Home</a>
            <a class="button success" href="#"><i class="fas fa-check"></i> Confirm</a>
            <a class="button alert" href="#"><i class="fas fa-trash"></i> Delete</a>
            <a class="button secondary" href="#"><i class="fas fa-cog"></i> Settings</a>
        </div>

        <h2>Full Width Buttons</h2>
        <div class="button-demo">
            <a class="button expanded" href="#">Full Width Button</a>
            <a class="button success expanded" href="#">Full Width Success Button</a>
        </div>

        <h2>Disabled Buttons</h2>
        <div class="button-demo">
            <a class="button disabled" href="#">Disabled Button</a>
            <button class="button" disabled>Disabled Button</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>

      Button Best Practices

      1. Semantic Usage: Use <button> for form submission, <a> for navigation
      2. Clear Copy: Button text should clearly express operation intent
      3. Appropriate Colors: Choose appropriate colors based on operation importance
      4. Accessibility: Add aria-label for icon buttons
      5. Feedback States: Provide hover, click, disabled state feedback
      <!-- Good button example -->
<button class="button success" type="submit">
    <i class="fa fa-save" aria-hidden="true"></i>
    Save Changes
</button>

<!-- Accessibility for icon button -->
<button class="button" type="button" aria-label="Delete item">
    <i class="fa fa-trash" aria-hidden="true"></i>
</button>

      Summary

      In this chapter, we learned:

      • Creating basic buttons
      • Button colors and sizes
      • Hollow and clear style buttons
      • Full width and disabled buttons
      • Buttons with icons
      • Dropdown and split buttons
      • Button best practices

      In the next chapter, we will learn about Foundation Button Groups.

      Tip: Buttons are important elements for user interaction. Ensure buttons are easy to click on all devices (recommended minimum click area is 44x44 pixels).