title: How to change button background colors and colors in Bootstrap 4 Sass?
body: <p>For a project I have to use certain custom color definitions from some ready-made design. It is my first project with Bootstrap (<a href="https://mdbootstrap.com/docs/jquery/" rel="nofollow noreferrer">https://mdbootstrap.com/docs/jquery/</a>).</p>
  
  <p>In order to stick to the design guidelines I am compiling the Bootstrap SASS file myself by including it from the node_modules folder like this:</p>
  
  <pre><code>// override BMD variables here@import "reset";
  @import "variables_bootstrap";
  @import "variables_mdb";
  
  // import BMD
  @import "../../../../node_modules/bootstrap-material-design/scss/core";
  </code></pre>
  
  <p>Within variables_bootstrap.scss I have all the bootstrap variables and alter them to my needs (breakpoints, theme colors etc.).</p>
  
  <p>When it comes to buttons I have a bunch of options:</p>
  
  <pre><code>$btn-padding-y:               $input-btn-padding-y;
  $btn-padding-x:               $input-btn-padding-x;
  $btn-font-family:             $input-btn-font-family;
  $btn-font-size:               $input-btn-font-size;
  $btn-line-height:             $input-btn-line-height;
  
  $btn-padding-y-sm:            $input-btn-padding-y-sm;
  $btn-padding-x-sm:            $input-btn-padding-x-sm;
  $btn-font-size-sm:            $input-btn-font-size-sm;
  $btn-line-height-sm:          $input-btn-line-height-sm;
  
  $btn-padding-y-lg:            $input-btn-padding-y-lg;
  $btn-padding-x-lg:            $input-btn-padding-x-lg;
  $btn-font-size-lg:            $input-btn-font-size-lg;
  $btn-line-height-lg:          $input-btn-line-height-lg;
  
  $btn-border-width:            $input-btn-border-width;
  
  $btn-font-weight:             $font-weight-normal;
  $btn-box-shadow:              inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075);
  $btn-focus-width:             $input-btn-focus-width;
  $btn-focus-box-shadow:        $input-btn-focus-box-shadow;
  $btn-disabled-opacity:        .65;
  $btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125);
  
  $btn-link-disabled-color:     $gray-600;
  
  $btn-block-spacing-y:         .5rem;
  
  // Allows for customizing button radius independently from global border radius
  $btn-border-radius:           $border-radius;
  $btn-border-radius-lg:        $border-radius-lg;
  $btn-border-radius-sm:        $border-radius-sm;
  
  $btn-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  </code></pre>
  
  <p>But it seems like there is not any settings regarding colors. My HTML is like:</p>
  
  <pre><code>&lt;button type="button" class="btn btn-primary"&gt;Primary&lt;/button&gt;
  &lt;button type="button" class="btn btn-secondary"&gt;Secondary&lt;/button&gt;
  &lt;button type="button" class="btn btn-success"&gt;Success&lt;/button&gt;
  &lt;button type="button" class="btn btn-danger"&gt;Danger&lt;/button&gt;
  </code></pre>
  
  <p>This is how the buttons look like:</p>
  
  <p><a href="https://i.stack.imgur.com/rqFk1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rqFk1.png" alt="MDB Buttons"></a></p>
  
  <p>Well the colors are like I have defined them, but I want the color to be the background color [its transparent] and and the actual color to be white. Maybe I just miss something obvious - do you know how to solve this?</p>
  
  <p>Note: Hardcoded overrides with !important for each and every generated button is not the solution which I am looking for.</p>