Custom Bootstrap Button with Sass/Scss

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 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>

Be Updated

Only articles are shared on Medium