A flexible Sass mixin for creating BEM-style buttons.

View on Github

.c-button {
  @import "node_modules/buttono/buttono";

  $buttono-font-family: Helvetica;

  @include buttono-block();

  &--default {
    @include buttono-style-modifier();
  }

  &--primary {
    @include buttono-style-modifier($background-color: lightblue);
  }
}

Great things about Button

01
Most of the time you will only need one color to create a button.

Just define a background color and you are good to go!
02
Even though Buttono is following the BEM methodology, you can still use it with all other conventions.

Buttono is non-restrictive.
03
The buttons you create with Buttono will look exactly the same in all modern browsers.

So you don’t have to worry about that!
04
Buttono deals with focus styles for accessibility.

Because accessibility matters!
05
Thanks to Buttono’s flexible structure you can configure it for any situation.

Buttono will be ready for every challenge!

See full documentation

Some Awes o me Examples

.c-button {
  @import 'node_modules/buttono/buttono';

  $buttono-padding: 0.5rem 2rem;
  $buttono-color-alt: #030315;
  $buttono-border-radius: 0.25rem;
  $buttono-transition-duration: 0.2s;

  @include buttono-block($display: inline-flex);

  // Extra styles
  min-height: 3.5rem;
  align-items: center;
  font-weight: 500;

  &--primary {
    @include buttono-style-modifier(
      $background-color: #5a46ff,
      $background-color-hover: #4333db
    );
  }

  &--success {
    @include buttono-style-modifier($background-color: #76d319);
  }

  &--danger {
    @include buttono-style-modifier($background-color: #fc3559);
  }

  &--warning {
    @include buttono-style-modifier($background-color: #fc840c);
  }

  &--info {
    @include buttono-style-modifier($background-color: #00cbf4);
  }

  &--light {
    @include buttono-style-modifier($background-color: #c4c5ca);
  }

  &--dark {
    @include buttono-style-modifier($background-color: #191922);
  }
}

.c-button {
  @import 'node_modules/buttono/buttono';

  $buttono-padding: 0.5rem 2rem;
  $buttono-color-alt: #030315;
  $buttono-border-radius: 0.25rem;
  $buttono-transition-duration: 0.2s;

  @include buttono-block($display: inline-flex);

  // Extra styles
  min-height: 3.5rem;
  align-items: center;
  font-weight: 500;

  &--outline-primary {
    @include buttono-style-modifier(
      $color: #fff,
      $color-disabled: #999,
      $border-width: 0.125rem,
      $border-color: #5a46ff,
      $background-color: transparent,
      $background-color-hover: #5a46ff,
      $border-color-disabled: #9e90ff,
      $color-disabled: #9e90ff
    );
  }

  &--outline-success {
    @include buttono-style-modifier(
      $color: #fff,
      $color-disabled: #999,
      $border-width: 0.125rem,
      $border-color: #76d319,
      $background-color: transparent,
      $background-color-hover: #76d319,
      $border-color-disabled: #bef171
    );
  }

  &--outline-danger {
    @include buttono-style-modifier(
      $color: #fff,
      $color-disabled: #999,
      $border-width: 0.125rem,
      $border-color: #fc3559,
      $background-color: transparent,
      $background-color-hover: #fc3559,
      $border-color-disabled: #feb6ae
    );
  }

  &--outline-warning {
    @include buttono-style-modifier(
      $color: #fff,
      $color-disabled: #999,
      $border-width: 0.125rem,
      $border-color: #fc840c,
      $background-color: transparent,
      $background-color-hover: #fc840c,
      $border-color-disabled: #fedc9d
    );
  }

  &--outline-info {
    @include buttono-style-modifier(
      $color: #fff,
      $color-disabled: #999,
      $border-width: 0.125rem,
      $border-color: #00cbf4,
      $background-color: transparent,
      $background-color-hover: #00cbf4,
      $border-color-disabled: #98fdf7
    );
  }

  &--outline-light {
    @include buttono-style-modifier(
      $color: #fff,
      $color-disabled: #999,
      $border-width: 0.125rem,
      $border-color: #c4c5ca,
      $background-color: transparent,
      $background-color-hover: #c4c5ca,
      $border-color-disabled: #efeff1,
    );
  }

  &--outline-dark {
    @include buttono-style-modifier(
      $color: #fff,
      $color-disabled: #999,
      $border-width: 0.125rem,
      $border-color: #191922,
      $background-color: transparent,
      $background-color-hover: #191922,
      $border-color-disabled: #c4c5ca
    );
  }
}