Open In App

Foundation CSS Button Even-width Group

Improve
Improve
Like Article
Like
Save
Share
Report

Foundation CSS is the frontend framework of CSS that is used to build responsive websites, apps, and emails that work perfectly on any device. It is written using HTML, CSS, and Javascript and is used by many famous companies like Amazon, Facebook, eBay, etc. It uses packages like Grunt and Libsass for fast coding and controlling and Saas compiler to make development faster. It offers the Fastclick.js tool for faster rendering on mobile devices.  

Buttons are one of the most common UI elements. We can create a button using the button class and use button-group class to make a button group element. The Button Even-width Group is used to make a full-width button group container. The buttons automatically occupy the width based on the total number of buttons in the group. In this article, we will discuss the Button Even-width Group in Foundation CSS.

Foundation CSS Button Even-width Group Class:

  • expanded: This class is used to make an expanded full-width container. It automatically gives width to buttons based on the total number of buttons in the button group.

Syntax:

<div class="expanded button-group">
    .....
</div> 

Example 1: The following code demonstrates Button Even-width Group using primary class buttons.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
>
</head>
  
<body>
    <center>
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <h3>Foundation CSS Button Even-width Group</h3>
  
        <div class="expanded button-group">
            <a class="button">
                Button 1
            </a>
            <a class="button">
                Button 2
            </a>
            <a class="button">
                Button 3
            </a>
        </div>
    </center>
</body>
  
</html>


Output:

primary class buttons

Example 2: The following code demonstrates Button Even-width Group using different button classes.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
</head>
  
<body>
    <center>
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <h3>Foundation CSS Button Even-width Group</h3>
  
        <div class="expanded button-group">
            <a class="button">
                Button 1
            </a>
            <a class="button">
                Button 2
            </a>
        </div>
  
        <div class="expanded button-group">
            <a class="success button">
                Success 1
            </a>
            <a class="success button">
                Success 2
            </a>
            <a class="success button">
                Success 3
            </a>
        </div>
  
        <div class="expanded button-group">
            <a class="primary button">
                Primary
            </a>
            <a class="secondary button">
                Secondary
            </a>
            <a class="success button">
                Success
            </a>
            <a class="warning button">
                Warning
            </a>
            <a class="alert button">
                Alert
            </a>
        </div>
    </center>
</body>
  
</html>


Output:

different button classes

Reference: https://get.foundation/sites/docs/button-group.html#even-width-group



Last Updated : 09 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads