Foundation CSS Buttons & Forms

Note: Foundation buttons and forms are designed to be accessible and customizable. All form elements come with proper ARIA attributes.

Master the art of creating interactive UI components with Foundation's comprehensive button and form system. Learn to build accessible, responsive forms with validation and custom styling.

📝 Forms
🎛️ Form Controls
📐 Form Layouts
✅ Form Validation

⌨️ Input Types
✨ Custom Forms
📋 Complete Examples

🔼 Foundation Buttons

Foundation provides a versatile button system with multiple styles, sizes, and states.

Basic Button Styles

Foundation Code:

<!-- Basic Buttons -->
<button class="button primary">Primary</button>
<button class="button secondary">Secondary</button>
<button class="button success">Success</button>
<button class="button warning">Warning</button>
<button class="button alert">Alert</button>

<!-- Additional Styles -->
<button class="button info">Info</button>
<button class="button light">Light</button>
<button class="button dark">Dark</button>
<a href="#" class="button">Link Button</a>

Hollow/Outline Buttons

Foundation Code:

<!-- Hollow Buttons -->
<button class="button hollow primary">Primary</button>
<button class="button hollow secondary">Secondary</button>
<button class="button hollow success">Success</button>
<button class="button hollow warning">Warning</button>
<button class="button hollow alert">Alert</button>
<button class="button hollow dark">Dark</button>

🎨 Button Styles & States

Disabled Buttons

Button with Icons

Button States

Clear Buttons

Foundation Button States & Icons:

<!-- Disabled Buttons -->
<button class="button primary" disabled>Primary</button>
<button class="button hollow secondary" disabled>Outline</button>

<!-- Active State -->
<button class="button primary active">Active Button</button>

<!-- Buttons with Icons -->
<button class="button primary">
  <i class="fi-download"></i> Download
</button>
<button class="button success">
  <i class="fi-check"></i> Save Changes
</button>

<!-- Clear Buttons -->
<button class="button clear primary">Clear Primary</button>
<button class="button clear secondary">Clear Secondary</button>
<button class="button clear alert">Clear Alert</button>

📏 Button Sizes

Size Variations

Foundation Button Sizes:

<!-- Tiny Button -->
<button class="button tiny primary">Tiny</button>

<!-- Small Button -->
<button class="button small primary">Small</button>

<!-- Default Button -->
<button class="button primary">Default</button>

<!-- Large Button -->
<button class="button large primary">Large</button>

<!-- Expanded (Full Width) -->
<button class="button expanded primary">Full Width Button</button>

<!-- Responsive Sizes -->
<button class="button small medium-large primary">
  Small on mobile, Large on medium+
</button>

👥 Button Groups & Toolbars

Basic Button Group

Button Group Sizes

Vertical Button Group

Segmented Control

Option 1Option 2Option 3

Foundation Button Groups:

<!-- Horizontal Button Group -->
<div class="button-group">
  <a class="button primary">First</a>
  <a class="button primary">Second</a>
  <a class="button primary">Third</a>
</div>

<!-- Vertical Button Group -->
<div class="button-group vertical">
  <a class="button primary">Top</a>
  <a class="button primary">Middle</a>
  <a class="button primary">Bottom</a>
</div>

<!-- Expanded (Equal Width) -->
<div class="button-group expanded">
  <a class="button primary">Equal</a>
  <a class="button primary">Width</a>
  <a class="button primary">Buttons</a>
</div>

<!-- Button Group Sizes -->
<div class="button-group small">
  <a class="button primary">Small</a>
  <a class="button primary">Group</a>
</div>

<!-- Segmented Control -->
<div class="segmented-control">
  <input type="radio" name="options" id="option1" checked>
  <label for="option1">Option 1</label>
  
  <input type="radio" name="options" id="option2">
  <label for="option2">Option 2</label>
</div>

📝 Foundation Forms

Foundation provides a clean, accessible form system with built-in validation and responsive layouts.

Basic Form Example

Foundation Form Structure:

<form>
  <!-- Form Group with Label -->
  <div class="grid-container">
    <div class="grid-x grid-padding-x">
      <div class="cell medium-6">
        <label>First Name
          <input type="text" placeholder="Enter first name">
        </label>
      </div>
      <div class="cell medium-6">
        <label>Last Name
          <input type="text" placeholder="Enter last name">
        </label>
      </div>
    </div>
  </div>
  
  <!-- Textarea -->
  <label>Message
    <textarea placeholder="Enter your message"></textarea>
  </label>
  
  <!-- Checkbox -->
  <div class="checkbox">
    <input type="checkbox" id="newsletter">
    <label for="newsletter">Subscribe to newsletter</label>
  </div>
  
  <!-- Submit Button -->
  <button type="submit" class="button primary">Submit Form</button>
</form>

🎛️ Form Controls

Select Menus

Single Select

Multiple Select

Radio & Checkbox

Radio Buttons

Option 1

Option 2

Checkboxes

Checkbox 1

Checkbox 2

Foundation Form Controls:

<!-- Select Menu -->
<label>Choose Option
  <select>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
</label>

<!-- Multiple Select -->
<label>Multiple Selection
  <select multiple>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
  </select>
</label>

<!-- Radio Buttons -->
<fieldset class="fieldset">
  <legend>Choose One</legend>
  <input type="radio" name="radio" value="1" id="radio1">
  <label for="radio1">Option 1</label>
  
  <input type="radio" name="radio" value="2" id="radio2">
  <label for="radio2">Option 2</label>
</fieldset>

<!-- Checkboxes -->
<input type="checkbox" id="checkbox1">
<label for="checkbox1">Checkbox 1</label>

<input type="checkbox" id="checkbox2">
<label for="checkbox2">Checkbox 2</label>

<!-- Switch (Toggle) -->
<div class="switch">
  <input type="checkbox" id="switch1">
  <label for="switch1">Toggle Switch</label>
</div>

<!-- Slider -->
<div class="slider" data-slider>
  <span class="slider-handle" data-slider-handle></span>
  <span class="slider-fill" data-slider-fill></span>
  <input type="hidden">
</div>

📐 Form Layouts

Inline Form

Horizontal Form

Foundation Form Layouts:

<!-- Inline Form -->
<form class="inline-form">
  <div class="grid-x grid-margin-x">
    <div class="cell small-12 medium-auto">
      <label>Email
        <input type="email" placeholder="Email address">
      </label>
    </div>
    <div class="cell small-12 medium-auto">
      <label>Password
        <input type="password" placeholder="Password">
      </label>
    </div>
    <div class="cell shrink">
      <button type="submit" class="button primary">Sign In</button>
    </div>
  </div>
</form>

<!-- Horizontal Form -->
<form>
  <div class="grid-container">
    <div class="grid-x grid-padding-x align-middle">
      <div class="cell medium-3">
        <label class="text-right medium-text-left">Email</label>
      </div>
      <div class="cell medium-9">
        <input type="email" placeholder="Email address">
      </div>
    </div>
  </div>
</form>

<!-- Stacked Form -->
<form class="stacked">
  <label>Email
    <input type="email" placeholder="Email address">
  </label>
  <label>Password
    <input type="password" placeholder="Password">
  </label>
</form>

✅ Form Validation

Validation States

Foundation Validation:

<!-- Valid State -->
<label class="is-valid">Valid Input
  <input type="text" class="is-valid-input" value="Correct value">
  <span class="form-error is-visible">Success message</span>
</label>

<!-- Invalid State -->
<label class="is-invalid">Invalid Input
  <input type="text" class="is-invalid-input" value="Wrong value">
  <span class="form-error">Error message</span>
</label>

<!-- Required Field -->
<label>Required Field
  <input type="text" required>
  <span class="form-error">This field is required</span>
</label>

<!-- Disabled Field -->
<label>Disabled Field
  <input type="text" disabled value="Cannot edit">
</label>

<!-- Help Text -->
<label>Input with Help Text
  <input type="text">
  <p class="help-text">This is help text for the input</p>
</label>

⌨️ Special Input Types

File Input

Default file input

Multiple files

Range & Color

Range input

Color picker

Foundation Special Inputs:

<!-- File Upload -->
<label>Upload File
  <input type="file" id="fileUpload">
</label>

<!-- Custom File Upload -->
<div class="input-group">
  <input type="file" class="input-group-field">
  <div class="input-group-button">
    <input type="submit" class="button" value="Upload">
  </div>
</div>

<!-- Range Slider -->
<div class="slider" data-slider>
  <span class="slider-handle" data-slider-handle></span>
  <span class="slider-fill" data-slider-fill></span>
  <input type="hidden">
</div>

<!-- Date Picker -->
<label>Date
  <input type="date">
</label>

<!-- Time Input -->
<label>Time
  <input type="time">
</label>

<!-- Search Input -->
<label>Search
  <input type="search" placeholder="Search...">
</label>

📋 Complete Registration Form Example

Registration Form

🎯 Practice Exercise

Create a login form with the following requirements:

Email input with validation
Password input with show/hide toggle
Remember me checkbox
Submit button with loading state
Link to forgot password
Responsive layout (stacked on mobile, inline on desktop)

<!-- Foundation Login Form Solution -->
<form class="login-form">
  <div class="grid-x grid-padding-x align-middle">
    <div class="cell medium-4">
      <label>Email Address
        <input type="email" placeholder="user@example.com" required>
        <span class="form-error">Please enter a valid email</span>
      </label>
    </div>
    
    <div class="cell medium-4">
      <label>Password
        <div class="input-group">
          <input type="password" id="password" placeholder="Password" required>
          <div class="input-group-button">
            <button type="button" class="button secondary" 
                    data-toggle="password">
              Show
            </button>
          </div>
        </div>
      </label>
    </div>
    
    <div class="cell medium-4">
      <div class="grid-x grid-padding-x align-middle">
        <div class="cell shrink">
          <input type="checkbox" id="remember">
          <label for="remember">Remember me</label>
        </div>
        
        <div class="cell auto">
          <button type="submit" class="button primary expanded">
            <span class="show-for-default">Sign In</span>
            <span class="show-for-loading">
              <i class="fi-refresh"></i> Loading...
            </span>
          </button>
        </div>
      </div>
      
      <div class="text-center">
        <a href="#" class="small">Forgot password?</a>
      </div>
    </div>
  </div>
</form>

Foundation CSS Tutorial

Foundation CSS Buttons & Forms

Quick Navigation

🔼 Foundation Buttons

Basic Button Styles

Foundation Code:

Hollow/Outline Buttons

Foundation Code:

🎨 Button Styles & States

Disabled Buttons

Button with Icons

Button States

Clear Buttons

Foundation Button States & Icons:

📏 Button Sizes

Size Variations

Foundation Button Sizes:

👥 Button Groups & Toolbars

Basic Button Group

Button Group Sizes

Vertical Button Group

Segmented Control

Foundation Button Groups:

📝 Foundation Forms

Basic Form Example

Foundation Form Structure:

🎛️ Form Controls

Select Menus

Radio & Checkbox

Foundation Form Controls:

📐 Form Layouts

Inline Form

Horizontal Form

Foundation Form Layouts:

✅ Form Validation

Validation States

Foundation Validation:

⌨️ Special Input Types

File Input

Range & Color

Foundation Special Inputs:

📋 Complete Registration Form Example

Registration Form

🎯 Practice Exercise

Follow Us

Our Tools

Our Company

Special Tools