Buttons | aurora-utilities Documentation

@mixin button()

Generate button variations quickly and easily.

Parameters

$background: (Color)

The desired background color.

$color: contrast($background) (Color)

The text color.

$background-hover: lighten($background, 10%) (Color)

The hover background color.

$color-hover: contrast($background-hover) (Color)

The hover border (use shorthand).

$background-active: $background-hover (Color)

The active background.

$color-active: contrast($background-active) (Color)

The active border.

Examples

scss Sample Usage

.button {
  @include button($color-primary, $color-white);
}

css compiled

.button {
  background-color: #2f80e8;
  border: none;
  color: #fff;
}

.button:focus, .button:hover {
  background-color: #5d9ced;
  color: #27292b;
}

.button:disabled {
  background-color: #5485c3;
}

.button:active {
  background-color: #5d9ced;
  color: #27292b;
}

html

<button type="button" class="button">Click Me</button>

Requires

@function tone()

@mixin button-outline()

Generate outline buttons.

Parameters

$border: (String)

The outline button’s border.

$color: (Color)

The button’s text color.

$border-hover: $border (String)

The hover border.

$color-hover: darken($color, 10%) (Color)

The hover text color.

$background-hover: transparent (Color)

The hover background color.

$border-active: $border-hover (String)

The active border.

$color-active: $color-hover (Color)

The active text color.

$background-active: $background-hover (Color)

The active background color.

Examples

scss Sample Usage

.button--outline {
  @include button-outline(2px solid $color-primary, $color-primary, $color-hover: $color-white, $background-hover: $color-primary);
}

css compiled

.button--outline {
  background-color: transparent;
  border: 2px solid #2f80e8;
  color: #2f80e8;
}

.button--outline:focus, .button--outline:hover {
  background-color: #2f80e8;
  border: 2px solid #2f80e8;
  color: #fff;
}

.button--outline:disabled {
  color: #5485c3;
}

.button--outline:active {
  background-color: #2f80e8;
  border: 2px solid #2f80e8;
  color: #fff;
}

html

<button type="button" class="button button--outline">Click Me</button>

Requires

@function tone()

@mixin button-size()

Create buttons of different sizes.

Parameters

$font-size: (Number)

The button font size.

$line-height: unitless-calc($base-line-height, $base-font-size) (Number)

The text line height.

$padding: (Number(s))

The space around text.

Examples

scss Sample Usage

.button--xl {
  @include button-size(2.25rem);
}

css compiled

.button--xl {
  font-size: 2.25rem;
  line-height: 1.5;
  padding: 0.5em 1em;
}

html

<button type="button" class="button button--xl">Click Me</button>

@mixin button-style()

Create different styles of button.

Parameters & Return

$string: 'rounded' (String)

The type of button to produce.

@error

#{inspect($string)} button type does not exist!

Examples

scss Sample Usage

.button--pill {
  @include button-style('pill');
}

css compiled

.button--pill {
  border-radius: 50px;
}

html

<button type="button" class="button button--pill">Click Me</button>

To-do List

Consider adding more button styles see Unicorn Buttons & these buttons are good inspiration.

@mixin hamburger-button()

Create a hamburger menu button. JavaScript interaction needs to be hooked up separately.

Parameters

$bar-color: (Color)

The color of the hamburger bars.

$bar-hover: (Color)

The color of the bars when the button is hovered.

$bar-height: (Number)

The height of the bars.

$bar-width: (Number)

The width of the bars.

$bar-selector: '.bars' (String)

The selector used within the button to create the bars.

Examples

scss Sample Usage

.button--hamburger {
  @include hamburger-button($color-primary);
}

css compiled

.button--hamburger {
  background-color: transparent;
  max-width: 20px;
  padding: 7.5px 10px;
  position: relative;
  text-indent: -9999em;
}

.button--hamburger .bars, .button--hamburger .bars:after, .button--hamburger .bars:before {
  background-color: #2f80e8;
  display: block;
  height: 3px;
  left: 0;
  margin: 0 auto;
  position: absolute;
  right: 0;
  transition: all 0.3s ease-in-out;
  width: 20px;
}

.button--hamburger .bars:after, .button--hamburger .bars:before {
  content: '';
}

.button--hamburger .bars:before {
  top: -6px;
}

.button--hamburger .bars {
  top: 50%;
  transform: translateY(-50%);
}

.button--hamburger .bars:after {
  bottom: -6px;
}

.button--hamburger:hover {
  background-color: transparent;
}

.button--hamburger:hover .bars, .button--hamburger:hover .bars:after, .button--hamburger:hover .bars:before {
  background-color: #2f80e8;
}

html

<button type="button" class="button button--hamburger">
  Menu
  <span class="bars"></span>
</button>

@mixin hamburger-button-active()

Transforms the hamburger button into an X.

Parameters

$bar-color: (Color)

The active color of bars.

$bar-height: (Number)

The height of the bars.

$bar-selector: '.bars' (String)

The selector used within the button to create the bars.

Examples

scss Sample Usage

.button--hamburger {
   @include hamburger-button($color-primary);

   &--is-active {
     @include hamburger-button-active($color-accent);
   }
}

css compiled

.button--hamburger {
  background-color: transparent;
  max-width: 20px;
  padding: 7.5px 10px;
  position: relative;
  text-indent: -9999em;
}

.button--hamburger .bars, .button--hamburger .bars:after, .button--hamburger .bars:before {
  background-color: #2f80e8;
  display: block;
  height: 3px;
  left: 0;
  margin: 0 auto;
  position: absolute;
  right: 0;
  transition: all 0.3s ease-in-out;
  width: 20px;
}

.button--hamburger .bars:after, .button--hamburger .bars:before {
  content: '';
}

.button--hamburger .bars:before {
  top: -6px;
}

.button--hamburger .bars {
  top: 50%;
  transform: translateY(-50%);
}

.button--hamburger .bars:after {
  bottom: -6px;
}

.button--hamburger:hover {
  background-color: transparent;
}

.button--hamburger:hover .bars, .button--hamburger:hover .bars:after, .button--hamburger:hover .bars:before {
  background-color: #2f80e8;
}

.button--hamburger--is-active:hover .bars, .button--hamburger--is-active:focus .bars, .button--hamburger--is-active:active .bars {
  background-color: transparent;
}

.button--hamburger--is-active .bars {
  background-color: transparent;
}

.button--hamburger--is-active .bars:after, .button--hamburger--is-active .bars:before {
  background-color: #e8982f;
  top: calc(50% - 3px / 2);
  transform: translateY(-50%);
}

.button--hamburger--is-active .bars:before {
  transform: rotate(45deg);
}

.button--hamburger--is-active .bars:after {
  transform: rotate(-45deg);
}

html

<button type="button" class="button button--hamburger button--hamburger--is-active">
  Menu
  <span class="bars"></span>
</button>

@mixin close-button()

Create a close button.

Parameters

$x-color: (Color)

The desired X color.

$x-size: 1rem (Number)

The font-size of the X.

$background: transparent (Color)

The desired background color.

$hover-x-color: $x-color (Color)

The hover X color.

$background-hover: $background (Color)

The hover background color.

$active-x-color: $hover-x-color (Color)

The active X color.

$active-background: $hover-background (Color)

The active background.

Examples

scss Sample Usage

.button--close {
  @include close-button($color-primary, transparent);
}

css compiled

.button--close {
  background-color: transparent;
  transition: background-color 0.3s ease-in-out;
}

.button--close:after {
  color: #2f80e8;
  content: '\00D7';
  transition: color 0.3s ease-in-out;
}

.button--close:focus, .button--close:hover {
  background-color: transparent;
}

.button--close:focus:after, .button--close:hover:after {
  color: #2f80e8;
}

.button--close:active {
  background-color: transparent;
}

.button--close:active:after {
  color: #2f80e8;
}

html

<button type="button" class="button button--close">
  <span class="screen-reader-text>Close</span> <!-- assumes a .screen-reader-text class using @include screen-reader exists. -->
</button>

@mixin plus-minus-button()

Creates a Plus-Minus button. Requires JavaScript be implemented separately.

Parameters & Return

$bar-color: (Color)

The color of the plus-minus bars.

$bar-height: (Number)

The height of the bars.

$bar-width: (Number)

The width of the bars.

$background: transparent (Color)

The button background.

$include-active: false (Boolean)

Determines whether to include styling for the active state. Allows different classes or modifiers to be used.

$active-selector: null (String)

The name of the selector to trigger the active state. Can include &.

@error

$include-active requires $active-selector to be specified.

Examples

scss Sample Usage

.button--plus-minus {
  @include plus-minus-button($color-primary);
}

css compiled

.button--plus-minus {
  background-color: transparent;
  padding: 10px;
  position: relative;
}

.button--plus-minus:after, .button--plus-minus:before {
  background-color: #2f80e8;
  bottom: 0;
  content: '';
  display: block;
  height: 3px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  transition: all 0.3s ease-in-out;
  width: 20px;
}

.button--plus-minus:after {
  transform: rotate(90deg);
}

.button--plus-minus:focus, .button--plus-minus:hover {
  background-color: transparent;
}

.button--plus-minus:focus:after, .button--plus-minus:focus:before, .button--plus-minus:hover:after, .button--plus-minus:hover:before {
  color: #2f80e8;
}

.button--plus-minus:active {
  background-color: transparent;
}

.button--plus-minus:active:after, .button--plus-minus:active:before {
  color: #2f80e8;
}

html

<button type="button" class="button button--plus-minus">
  <span class="screen-reader-text>Expand</span> <!-- assumes a .screen-reader-text class using @include screen-reader exists. -->
</button>

Requires

@mixin plus-minus-button-active()

Styles the active (minus) state of the Plus-Minus button.

Parameters

$active-bar-color: (Color)

The color of the minus.

$active-background: transparent (Color)

The button background color.

Examples

scss Sample Usage

.button--plus-minus {
  @include plus-minus-button($color-primary);

  &--is-active {
    @include plus-minus-button-active($color-primary);
  }
}

css compiled

.button--plus-minus {
  background-color: transparent;
  padding: 10px;
  position: relative;
}

.button--plus-minus:after, .button--plus-minus:before {
  background-color: #2f80e8;
  bottom: 0;
  content: '';
  display: block;
  height: 3px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  transition: all 0.3s ease-in-out;
  width: 20px;
}

.button--plus-minus:after {
  transform: rotate(90deg);
}

.button--plus-minus:focus, .button--plus-minus:hover {
  background-color: transparent;
}

.button--plus-minus:focus:after, .button--plus-minus:focus:before, .button--plus-minus:hover:after, .button--plus-minus:hover:before {
  color: #2f80e8;
}

.button--plus-minus:active {
  background-color: transparent;
}

.button--plus-minus:active:after, .button--plus-minus:active:before {
  color: #2f80e8;
}

.button--plus-minus--is-active {
  background-color: transparent;
}

.button--plus-minus--is-active:after, .button--plus-minus--is-active:before {
  background-color: #2f80e8;
}

.button--plus-minus--is-active:after {
  transform: rotate(180deg);
}

html

<button type="button" class="button button--plus-minus button--plus-minus--is-active">
  <span class="screen-reader-text>Expand</span> <!-- assumes a .screen-reader-text class using @include screen-reader exists. -->
</button>

@mixin button()

Parameters

$background: (Color)

$color: contrast($background) (Color)

$background-hover: lighten($background, 10%) (Color)

$color-hover: contrast($background-hover) (Color)

$background-active: $background-hover (Color)

$color-active: contrast($background-active) (Color)

Examples

Requires

@function tone()

@mixin button-outline()

Parameters

$border: (String)

$color: (Color)

$border-hover: $border (String)

$color-hover: darken($color, 10%) (Color)

$background-hover: transparent (Color)

$border-active: $border-hover (String)

$color-active: $color-hover (Color)

$background-active: $background-hover (Color)

Examples

Requires

@function tone()

@mixin button-size()

Parameters

$font-size: (Number)

$line-height: unitless-calc($base-line-height, $base-font-size) (Number)

$padding: (Number(s))

Examples

@mixin button-style()

Parameters & Return

$string: 'rounded' (String)

@error

Examples

To-do List

@mixin hamburger-button()

Parameters

$bar-color: (Color)

$bar-hover: (Color)

$bar-height: (Number)

$bar-width: (Number)

$bar-selector: '.bars' (String)

Examples

@mixin hamburger-button-active()

Parameters

$bar-color: (Color)

$bar-height: (Number)

$bar-selector: '.bars' (String)

Examples

@mixin close-button()

Parameters

$x-color: (Color)

$x-size: 1rem (Number)

$background: transparent (Color)

$hover-x-color: $x-color (Color)

$background-hover: $background (Color)

$active-x-color: $hover-x-color (Color)

$active-background: $hover-background (Color)

Examples

@mixin plus-minus-button()

Parameters & Return

$bar-color: (Color)

$bar-height: (Number)

$bar-width: (Number)

$background: transparent (Color)

$include-active: false (Boolean)

$active-selector: null (String)

@error

Examples

Requires

@mixin plus-minus-button-active()

@mixin plus-minus-button-active()

Parameters

$active-bar-color: (Color)

$active-background: transparent (Color)

Examples

Used By

@mixin plus-minus-button()