Beth3346 / elr-scss-buttons

some scss mixins for basic buttons

Buttons

some scss mixins for buttons

View Demo

Installation

Download node at nodejs.org and install it, if you haven't already.

npm install elr-scss-buttons

or

yarn add elr-scss-buttons

Implementation

Scss

.button {
  margin: 8px;
  @include elr-button;
  @include elr-button-context;
  @include elr-button-branded;
}

.button-raised {
  @include elr-button-raised;
}

.button-gradient {
  @include elr-button-gradient;
}

.button-glass {
  @include elr-button-glass;
}

.button-invert {
  @include elr-button(
    $config: (
      background-color: $primary-color,
      hover-color: #76d219,
      border-radius: 0,
    )
  );
  margin: 8px;
}

.button-group {
  @include elr-button-group;
}

.button-icon {
  @include elr-icon-button;
  margin: 8px;
}

.button-icon-round {
  @include elr-icon-button(
    $config: (
      round: true,
    )
  );
  margin: 8px;
}

HTML

<button class="button">Button</button>

<button class="button button-pill">Button</button>

<button class="button-invert">Button</button>

<button class="button button-ghost">Button</button>

<button class="button button-ghost button-pill">Button</button>

<button class="button button-raised">Button</button>

<button class="button button-gradient">Button</button>

<button class="button button-glass">Button</button>

SEE LICENSE IN LICENSE.md