Foundation CSS Button Group Sass Reference
Last Updated :
19 Sep, 2022
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 and 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.
Variable Used:
| Variable-Name | Description | Type | Default-Value |
|---|
| $buttongroup-margin | This variable is used to define the margin for button groups. | Number | 1rem |
| $buttongroup-spacing | This variable is used to define the margin between buttons in a button group. | Number | 1px |
| $buttongroup-child-selector | This variable is used to define the selector for the buttons inside a button group. | String | '.button' |
| $buttongroup-expand-max | This variable is used to define the Maximum number of buttons that can be in an even-width button group. | Number | 6 |
| $buttongroup-radius-on-each | This variable is used to determine if $button-radius is applied to each button or the button group as a whole. | Boolean | true |
Example 1: In the below code, we will make use of the above variable to demonstrate the use of the button group.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>GeeksforGeeks</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css"
crossorigin="anonymous">
</head>
<body style="margin:15px">
<center>
<h1 style="color:green;" style="margin-left:950px;">
GeeksforGeeks
</h1>
<h3>A computer science portal for geeks</h3>
<div class="button-group" style="margin-left:350px;">
<a class="button">GfG1</a>
<a class="button">GfG2</a>
<a class="button">GfG3</a>
</div>
</center>
</body>
</html>
SASS Code:
$buttongroup-margin : 1rem;
.button-group {
margin:$buttongroup-margin;
}
Compiled CSS Code:
.button-group {
margin: 1rem;
}
Output:
Example 2: In the below code, we will make use of the above variable to demonstrate the use of the button group.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>GeeksforGeeks</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css"
crossorigin="anonymous">
</head>
<body style="margin:15px">
<center>
<h1 style="color:green;" style="margin-left:950px;">
GeeksforGeeks
</h1>
<h3>A computer science portal for geeks</h3>
<div class="button-group" style="margin-left:350px;">
<a class="button">GfG1</a>
<a class="button">GfG2</a>
<a class="button">GfG3</a>
</div>
</center>
</body>
</html>
SASS Code:
$buttongroup-spacing: 1px;
.button {
padding:$buttongroup-spacing;
}
Compiled CSS Code:
.button {
padding: 1px;
}
Output:
Reference: https://get.foundation/sites/docs/button-group.html
Similar Reads
Foundation CSS Button Sass Reference 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 and can be accessible to any device. It is used by many companies such as Facebook, eBay, Moz
3 min read
Foundation CSS Close Button Sass Reference Foundation CSS is an open-source and responsive front-end framework created by ZURB in September 2011. It makes it simple to create stunning responsive websites, apps, and emails that operate on any device. Many companies, like Facebook, eBay, Mozilla, Adobe, and even Disney, use it. This framework
3 min read
Foundation CSS Menu Sass Reference Foundation CSS is an open-source & 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,
3 min read
Foundation CSS Badge Sass Reference Foundation CSS is an open-source & responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to layout stunning responsive websites, apps, and emails that appear amazing & can be accessible to any device. Â It is utilized by many groups including Facebook,
3 min read
Foundation CSS Abide Sass Reference Foundation CSS is an open-source and responsive front-end framework created by ZURB in September 2011 that makes it simple to create stunning responsive websites, apps, and emails that operate on any device. Many companies, like Facebook, eBay, Mozilla, Adobe, and even Disney, use it. The framework
3 min read
Foundation CSS Accordion Sass Reference Foundation CSS is an open-source and responsive front-end framework created by ZURB in September 2011 that makes it simple to create stunning responsive websites, apps, and emails that operate on any device. Many companies, like Facebook, eBay, Mozilla, Adobe, and even Disney, use it. This framework
4 min read