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!

Some Awes o me Examples

Edit on Codepen
.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);
  }
}
Edit on Codepen
.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
    );
  }
}