title: Overriding bootstrap 4 primary button styling with scss
body: <p>I am new to using SASS and I have found a lot of posts about how to change the primary button color, which is easy, but I would also like the change the border and the hover. The only way I can think of is to add an extra class which I have called 'basic'. Here is my code:</p>
  
  <p><strong>SCSS</strong></p>
  
  <pre><code>$btn-bg: $bright-pink;    
  
  @mixin button-variant($color, $background, $border) {
  color: #fff;
  background-color: $btn-bg;
  border: 3px solid $btn-bg;
  
  &amp;:hover {
      color: $btn-bg;
      background-color: $transparent;
      border: 3px solid $btn-bg;
    }
  }
  
  .btn-primary.basic { @include button-variant
    (#fff,
    $btn-basic,
    3px solid $btn-bg); 
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code> &lt;button type="button" class="btn btn-primary basic"&gt;Primary text&lt;/button&gt;
  </code></pre>
  
  <p>Is there a better way of doing this? Can I override the primary button without adding an extra class?</p>