Foundation CSS is an open-source and responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay, Mozilla, Adobe, and even Disney. The framework is built on SaaS-like bootstrap. It is more sophisticated, flexible, and easily customizable. It also comes with CLI, so it’s easy to use it with module bundlers. It offers the Fastclick.js tool for faster rendering on mobile devices.
Foundation CSS offers us a Button Group where buttons of identical nature can be grouped. Foundation CSS allows the buttons in the button group to be stacked upon each vertically using the stacked class. Let’s have a look at how to achieve it.
Foundation CSS Button Group:
- Basics: This creates a basic button group in Foundation CSS.
- Sizing: This is used to create different sizes of buttons. The different sizes of button groups are tiny, small, and large.
- Coloring: This is used to give colors to the buttons.
- Hollow and clear: This is used to give hollow and clear styles to the buttons.
- No Gaps: This is used to remove the 1px spacing between the buttons in the button group.
- Even-Width group: This is used to make a full-width button group container.
- Stacking: This stacks the buttons in the button group vertically.
- Split Buttons: This allows the buttons in the button group to be split up where each button is moved apart with a consistent border.
- Flexbox Button group: The buttons are positioned using the Flexbox Utility classes in Foundation CSS.
Syntax:
<div class="button-group button-group-class"> .... </div>
Note: Use the above syntax according to the need by using a combination of the above-mentioned classes. Refer to the examples below for a better understanding of the classes.
Example 1: This is a basic example illustrating the basic, sizing button group created using Foundation CSS.
<!DOCTYPE html><html lang="en">
<head>
<title>Foundation CSS Button Group</title>
<!-- Compressed CSS -->
<link rel="stylesheet" href=
<link rel="stylesheet" href=
"//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css" />
<!-- Compressed JavaScript -->
<script src=
</script>
<script src=
</script>
<style>
body {
margin-left: 10px;
margin-right: 10px;
}
</style>
</head>
<body>
<h1 style="color:green;">GeeksforGeeks</h1>
<strong>Foundation CSS Button Group Basics</strong>
<div class="button-group">
<a class="button">Button Group Basics-1</a>
<a class="button">Button Group Basics-2</a>
<a class="button">Button Group Basics-3</a>
</div>
<b>Button Group Sizing</b>
<div class="button-group tiny">
<a class="button">Button Group Sizing-1</a>
</div>
<div class="button-group small">
<a class="button">Button Group Sizing-2</a>
</div>
<div class="button-group large">
<a class="button">Button Group Sizing-3</a>
</div>
<script>
$(document).foundation();
</script>
</body>
</html>
|
Output:
Example 2: This is a basic example illustrating coloring, hollow and clear, and no gaps button group created using Foundation CSS.
<!DOCTYPE html><html lang="en">
<head>
<title>Foundation CSS Button Group</title>
<!-- Compressed CSS -->
<link rel="stylesheet" href=
<link rel="stylesheet" href=
"//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css" />
<!-- Compressed JavaScript -->
<script src=
</script>
<script src=
</script>
<style>
body {
margin-left: 10px;
margin-right: 10px;
}
</style>
</head>
<body>
<h1 style="color:green;">GeeksforGeeks</h1>
<strong> Foundation CSS Button Group</strong>
<b>Button Group Coloring</b>
<div class="button-group">
<a class="secondary button">Button Group Coloring-1</a>
<a class="success button">Button Group Coloring-2</a>
<a class="warning button">Button Group Coloring-3</a>
<a class="alert button">Button Group Coloring-4</a>
</div>
<b>Button Group Hollow and Clear</b>
<div class="button-group">
<a class="secondary button hollow">Button Group Hollow</a>
<a class="success button hollow">Button Group Hollow</a>
<a class="warning button clear">Button Group Clear</a>
<a class="alert button clear">Button Group Clear</a>
</div>
<b>Button Group No Gaps</b>
<div class="primary button-group no-gaps">
<a class="button">No Gaps-1</a>
<a class="button">No Gaps-2</a>
<a class="button">No Gaps-3</a>
<a class="button">No Gaps-4</a>
</div>
<script>
$(document).foundation();
</script>
</body>
</html>
|
Output:
Example 3: This is a basic example illustrating the even-width, stacking, and split button group created using Foundation CSS.
<!DOCTYPE html><html lang="en">
<head>
<title>Foundation CSS Button Group</title>
<!-- Compressed CSS -->
<link rel="stylesheet" href=
<link rel="stylesheet" href=
"//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css" />
<!-- Compressed JavaScript -->
<script src=
</script>
<script src=
</script>
<style>
body {
margin-left: 10px;
margin-right: 10px;
}
</style>
</head>
<body>
<h1 style="color: green;">GeeksforGeeks</h1>
<strong> Foundation CSS Button Group</strong>
<b>Button Group Even Width</b>
<div class="expanded button-group">
<a class="button">EvenWidth-1</a>
<a class="button">EvenWidth-2</a>
<a class="button">EvenWidth-3</a>
</div>
<b>Button Group Stacking</b>
<div class="stacked-for-small button-group">
<a class="button">One</a>
<a class="button">Two</a>
<a class="button">Three</a>
<a class="button">Four</a>
<a class="button">Five</a>
</div>
<b>Button Group Split Buttons</b>
<div class="button-group">
<a class="button">Primary Action</a>
<a class="dropdown button arrow-only"></a>
</div>
<script>
$(document).foundation();
</script>
</body>
</html>
|
Output:
Example 4: This is a basic example illustrating the flexbox button group created using Foundation CSS.
<!DOCTYPE html><html lang="en">
<head>
<title>Foundation CSS Button Group</title>
<!-- Compressed CSS -->
<link rel="stylesheet" href=
<link rel="stylesheet" href=
"//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css" />
<!-- Compressed JavaScript -->
<script src=
</script>
<script src=
</script>
<style>
body {
margin-left: 10px;
margin-right: 10px;
}
</style>
</head>
<body>
<h1 style="color:green;">GeeksforGeeks</h1>
<strong> Foundation CSS Button Group</strong>
<b>Flexbox Button Group</b>
<div class="button-group align-center">
<a class="button">Center</a>
<a class="button">Center</a>
<a class="button">Center</a>
</div>
<div class="button-group align-right">
<a class="button">Right</a>
<a class="button">Right</a>
<a class="button">Right</a>
</div>
<div class="button-group align-spaced">
<a class="button">Spaced</a>
<a class="button">Spaced</a>
<a class="button">Spaced</a>
</div>
<div class="button-group align-justify">
<a class="button">Justify</a>
<a class="button">Justify</a>
<a class="button">Justify</a>
</div>
<script>
$(document).foundation();
</script>
</body>
</html>
|
Output:
Reference: https://get.foundation/sites/docs/button-group.html