Foundation - Button SASS Reference

Description

You can change the styles of the components by using SASS Reference.

Variables

The following table lists the SASS variables in a project's settings file that makes this component's default styles to get customized.

Sr.No. Name & Description Type Default Value
1

$button-padding

Padding within buttons.

 List 0.85em 1em
2

$button-margin

Margin around buttons.

 List 0 0 $global-margin 0
3

$button-fill

Fill for buttons by default. It can be either solid or hollow.

 Keyword solid
4

$button-background

Default background color of the buttons.

 Color $primary-color
5

$button-background-hover

On hovering background color of buttons

 Color scale-color($button-background, $lightness: -15%)
6

$button-color

Font color of the buttons.

 List #fff
7

$button-color-alt

Font color of the button, if the background is light.

 List #000
8

$button-radius

Represents border radius of buttons, defaulted to global-radius.

 Number $global-radius
9

$button-sizes

Button sizes.

 Map tiny: 0.6rem
small: 0.75rem
default: 0.9rem
large: 1.25rem
10

$button-opacity-disabled

Opacity of a button, which is disabled.

 List 0.25

Mixins

To build this component's final CSS output, the following mixins can be used. To build your own class structure using Foundation components, you can use the mixins yourself.

button-expand

@include button-expand($expand);

It is used to expand a button to its full-width.

Sr.No. Parameter & Description Type Default Value
1

$expand

Set to true to enable expand or false otherwise.

 Boolean true

button-style

@include button-style($background, $background-hover, $color);

It sets the button's visual style.

Sr.No. Parameter & Description Type Default Value
1

$background

Button's background color.

 Color $button-background
2

$background-hover

On hover background color of the button. Set to auto will automatically generate a color for hover.

 Color $button-background-hover
3

$color

Text color on button. Set to auto will automatically generate a color depending on background color.

 Color $button-color

button-hollow

@include button-hollow;

It removes on hover background fill and hollow button focus.

button-disabled

@include button-disabled;

By fading the element, reseting cursor and disabling events of pointers, it adds disabled styles to a button.

button-dropdown

@include button-dropdown($size, $color, $offset);

It adds a dropdown arrow for a button.

Sr.No. Parameter & Description Type Default Value
1

$size

It represents the size of the arrow. Use of em value is recommended so the triangle scales when used within different button sizes.

 Number 0.4em
2

$color

Color of the arrow.

 Color white
3

$offset

Represents the distance between a button's text and arrow.

 Number $button-padding

button

@include button($expand, $background, $background-hover, $color, $style);

It adds every style for a button.

Sr.No. Parameter & Description Type Default Value
1

$expand

To make button full-width set it to true.

 Boolean false
2

$background

Button's background color.

 Color $button-background
3

$background-hover

On hover, set the background color. Set to auto to make the mixin generate hover color automatically.

 Color $button-background-hover
4

$color

Represents the button's text color. Set to auto to generate a color depending on background color automatically.

 Color $button-color
5

$style

To create hollow button, set it to hollow. $background color is used as button primary color.

 Keyword solid
foundation_basic_controls.htm
Advertisements