button-width

@include button-width(
  $width,
  $buttonRowChild,
  $gutter
);

Description

Set the width of a button to give it more prominence in a layout.

Parameters

$width (unit | 'full' | 'half')
The width you want the button to be. Passing full is equivalent to 100%, and half to 50%.

$buttonRowChild (boolean)
This determines whether or not the button is contained within a button-row. The majority of buttons you see will be contained within a button-row and having this set to true means that the width will be calculated with an adjusted to account for the gutter between buttons.
Default: true

$gutter (unit)
This refers to the default horizontal margin set between buttons in a button-row. If you adjust the margins of these buttons, you can pass in your adjusted value to account for the space.
Default: 0.5em

Return

(CSS) Styles to apply width to button.

Examples

Make all Donation buttons full-width on mobile

@include respond-to('mobile') {
	.button[href="/donate"] {
		@include button-width('full');
  }
}

Interactive example