Custom color on checkbox button bootstrap

Im trying to get custom colors on my checkbox buttons in bootstrap 4 and MBD 5. I've managed to change the color on some of the parts, but cannot manage to change the color when its toggled and when i toggled it once and tries to turn it off it doesn't change back to my primary color on the button until i click somewhere else on the page. My code for the buttons is below.

<div class="form-group">
  <h2>Heading</h2>                
    <div class="btn-group-toggle" data-toggle="buttons">
      <input type="checkbox" class="btn-check" id="risk1" autocomplete="off" onclick="myFunction(this.id)">
      <label class="btn btn-primary col" for="risk1">Checkbox 1</label>
    </div>

    <div class="btn-group-toggle" data-toggle="buttons">
      <input type="checkbox" class="btn-check" id="risk2" autocomplete="off" onclick="myFunction(this.id)">
      <label class="btn btn-primary col" for="risk2">Checkbox 2</label>
    </div>
</div>

The code i use in my CSS to change the color of the buttons is below.

.btn-primary{color:#fff;background-color:#007b4e;border-color:#007b4e}
.btn-primary:hover{color:#fff;background-color:#08402b;border-color:#08402b}
.btn-primary:focus,.btn-primary.focus{box-shadow:0 0 0 .2rem rgba(0,90,90,0.5)}
.btn-primary.disabled,
.btn-primary:disabled{color:#fff;background-color:#08402b;border-color:#08402b}
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show>.btn-primary.dropdown-toggle{color:#fff;background-color:#08402b}
.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.show>.btn-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(0,90,90,0.5)}

The onclick function is because every checkbox is going to show a text if its checked or not.