how to change bootstrap version 4 primary button color (SASS)

2 version (nested rules and include a button-variant mixin

by Zsanett Tamás

HTML

<!DOCTYPE html>
<html lang="hu">

  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="author" content="Zsena">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  </head>

  <body>
    <div class="btn-variant">
      <a class="btn btn-primary btn-lg brw-btn" href="#kapcsolat" role="button"><strong>Vegye fel velünk</strong> a kapcsolatot!</a>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>

</html>

SCSS

$primary: #f6a415;
$secondary: #00a79d;
$white: #fff;
$black: #000;
$btn-focus-width: none;

.btn-variant {
  .btn-primary {
    color: $black;
    background-color: $primary;
    border-color: $primary;
    margin: 50px;

    &:hover,
    &.hover,
    &:focus,
    &.focus,
    &:active,
    &.active {
      color: $white;
      background-color: $secondary;
      border-color: $secondary;
      box-shadow: $btn-focus-width;
    }

    &:not(:disabled):not(.disabled) {
      &:active,
      &.active,
      &:hover,
      &.focus,
      &:focus,
      &:active:focus {
        color: $white;
        background-color: $secondary;
        border-color: $secondary;
        box-shadow: $btn-focus-width;
      }
    }
  }
}

/* @import "~bootstrap/scss/bootstrap";

$btn-primary-bg: #f6a415;
$btn-primary-border: #f6a415;
$btn-primary-pseudo-bg: #00a79d;
$btn-primary-pseudo-border: #00a79d; */

/* .btn-primary {
  @include button-variant($btn-primary-bg, darken($btn-primary-border, 0%), darken($btn-primary-pseudo-bg, 0%), lighten($btn-primary-pseudo-border, 0%), lighten($btn-primary-pseudo-border, 0%), darken($btn-primary-pseudo-bg, 0%));
}
 */