Foundation CSS Button Sass Reference
Last Updated :
12 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.
Buttons are very useful tools when you need more traditional actions. So when it comes to Foundation CSS, it has many easy-to-use button styles that you can customize or override to fit your needs. Foundation provides additional classes that can be added to your button component to change its color, size, hollow styles, etc.
In this article, we will know how to use different properties of buttons to alter them using Foundation CSS.
Variable Used:
| Variable-Name | Description | Type | Default-Value |
|---|
| $button-font-family | This variable is used to define the font family for button elements. | Font | inherit
|
| $button-font-weight | This variable is used to define the font weight for button elements. | Font-Weight | null |
| $button-padding | This variable is used to define the padding inside buttons. | List | 0.85em 1em
|
| $button-margin | This variable is used to define the margin around buttons. | List | 0 0 $global-margin 0 |
| $button-fill | This variable is used to define the default fill for buttons. | Keyword | solid
|
| $button-background | This variable is used to define the default background color for buttons. | Color | $primary-color
|
| $button-background-hover | This variable is used to define the background color on hover for buttons. | Color | scale-color($button-background, $lightness: -15%)
|
| $button-color | This variable is used to define the font color for buttons. | List | $white
|
| $button-color-alt | This variable is used to define the alternative font color for buttons. | List | $black
|
| $button-radius | This variable is used to define the border radius for buttons, defaulted to global-radius. | Number | $global-radius
|
| $button-border | This variable is used to define the border for buttons, transparent by default | List | 1px solid transparent
|
| $button-hollow-border-width | This variable is used to define the border width for hollow outline buttons | Number | 1px
|
| $button-sizes | This variable is used to define the sizes of buttons. | Map | tiny: 0.6rem
small: 0.75rem
default: 0.9rem
large: 1.25rem
|
| $button-palette | This variable is used to define the color of the classes. | Map | $foundation-palette
|
| $button-opacity-disabled | This variable is used to define the opacity for a disabled button. | List | 0.25
|
| $button-background-hover-lightness | This variable is used to define the background color lightness on hover for buttons. | Number | -20%
|
| $button-hollow-hover-lightness | This variable is used to define the color lightness on hover for hollow buttons. | Number | -50%
|
| $button-transition | This variable is used to define the transitions for buttons. | List | background-color 0.25s ease-out, color 0.25s ease-out
|
| $button-responsive-expanded | This variable is used to define the Additional responsive classes for .expanded. | Boolean | false
|
Example 1: In the below code, we will make use of the above variable to demonstrate the use of the buttons.
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-inline:30rem;">
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h2>A computer science portal for geeks</h2>
<a href="#" class="button">
GFG Button 1
</a>
<a href="#" class="button">
GFG Button 2
</a>
<a href="#" class="button">
GFG Button 3
</a>
</center>
</body>
</html>
SASS Code:
$button-padding: 3px;
.button{
padding:$button-padding;
}
Compiled CSS Code:
.button
{
padding: 3px
}
Output:
Example 2: In the below code, we will make use of the above variable to demonstrate the use of the buttons.
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-inline:30rem;">
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h2>A computer science portal for geeks</h2>
<a href="#" class="button">
GFG Button 1
</a>
<a href="#" class="button">
GFG Button 2
</a>
<a href="#" class="button">
GFG Button 3
</a>
</center>
</body>
</html>
SASS Code:
$button-color: red;
.button{
color:$button-color;
}
Compiled CSS Code:
.button
{
color: red;
}
Output:
Reference: https://get.foundation/sites/docs/button.html
Similar Reads
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 Button Group 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
2 min read
Foundation CSS Callout 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
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 Card 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 layout stunning responsive websites, apps, and emails that appear amazing and can be accessible to any device. One such useful component which is used in modern websi
2 min read