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 Name	Purpose	Color
.primary	Primary action	Blue
.secondary	Secondary action	Gray
.success	Success/Confirm	Green
.warning	Warning/Attention	Yellow
.alert	Danger/Delete	Red

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 Name	Description
.tiny	Extra small button
.small	Small button
(Default)	Standard size
.large	Large 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>

Dropdown Buttons

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>

Dropdown Arrow

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).