Custom Bootstrap Button with Sass/Scss

Bootstrap 4 Sass module provides mixin parameterized button-variant, which can be used to create customized coloured buttons.

The mixin declaration is as:

@mixin button-variant(
  $background,
  $border,
  $hover-background,
  $hover-border,
  $active-background,
  $active-border
);

$background and $border parameters must be provided, and rest are optional parameters. It automatically generates button text color in contrast to the provided background color

In action

@import node_modules/bootstrap/scss/mixin;

$feature-bg: #ffd803;

.btn-feature {
  @include button-variant($feature-bg, darken($feature-bg, 3%));

  // optitional
  // color: #fff; #uncomment and add your color
}

<button class="btn btn-feature">Feature</button>