Config based button SASS styles

_buttons.scss

$buttons: (
  default: ()
) !defualt;

// Button mixin
@mixin btn($button-key, $size: small) {
  $button: extend-in-map($buttons, $button-key);

  display: inline-block;
  line-height: 1;
  font-weight: 700;
  overflow: hidden;
  position: relative;
  vertical-align: middle;
  z-index: z(buttons, base);
  transition: 50ms transform;

  color: key($button, color);

  @if ($size == small) {
    padding: 8px 12px;
    font-size: 14px;
  } @else if ($size == medium) {
    padding: 10px 12px;
    font-size: 14px;
  } @else if ($size == large) {
    padding: 12px 20px;
    font-size: 16px;
  }

  &:before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: key($button, background);
    border: 2px solid key($button, border);
    z-index: z(buttons, background);
  }

  &:after {
    @include diagonal-overlay(0, key($button, active-overlay));
    z-index: z(buttons, active-overlay);
  }
  
  @include selector-group(active) {
    color: key($button, active-color);

    &:before {
      border-color: key($button, active-border);
      background: key($button, active-background);
    }

    &:after {
      @include overlay-set-pos(60%);
    }
  }

  &:active {
    transform: translateY(1px);
  }
}

_config.scss

$buttons: (
  _base: (
    background: $sky-dark,
    color: #fff,
    border: $sky-dark,
    active-background: $sky-dark,
    active-color: #fff,
    active-overlay: rgba($sky-light, 0.65),
    active-border: $sky-dark
  ),
  blue: (
    extend: _base // extend key takes config from provided key and lets you override what's different.
  ),
  white: (
    background: #fff,
    color: $sky-dark,
    border: $sky-dark,
    active-background: #fff,
    active-color: #bababa,
    active-border: #bababa,
    active-overlay: #f5f5f5
  ),
  white-no-border: (
    extend: white,
    border: #fff,
    active-border: #fff
  )
);

_elements.scss

// Create button classes
@each $key, $configuration in $buttons {
  @if $key != '_base' {
    .btn.#{$key}.small {
      @include btn($key, small);
    }
    .btn.#{$key}.large {
      @include btn($key, large);
    }
  }
}

_my-cta.scss

// Use on random cta

.my-cta {
  // other styles...

  button {
    @include btn(blue, small);
  }
}