title: Change Bootstrap CSS for a button property after click
body: <p>I'm working with Bootstrap and I'm trying to change the color of the button but it turns out that after the button has been clicked and mouse is not on it, the color is changed to blue again.</p>
  <p>That is the color I chose:</p>
  <p><a href="https://i.stack.imgur.com/DCMq5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DCMq5.png" alt="enter image description here" /></a></p>
  <p>But after a click and if the mouse is not 'inside', the color goes to blue:</p>
  <p><a href="https://i.stack.imgur.com/jlOtb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jlOtb.png" alt="enter image description here" /></a></p>
  <p>I've already changed the most properties as you can see below:</p>
  <pre><code>.btn:focus, .btn.focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem #EB984E;
  }
  .btn-primary {
    color: #fff;
    background-color: #EB984E;
    border-color: #EB984E;
  }
  
  .btn-primary:hover {
    color: #fff;
    background-color: #EB984E;
    border-color: #EB984E;
  }
  
  .btn-primary:focus, .btn-primary.focus {
    box-shadow: 0 0 0 0.2rem #EB984E;
  }
  
  .btn-primary.disabled, .btn-primary:disabled {
    color: #fff;
    background-color: ##EB984E;
    border-color: ##EB984E;
  }
  
  .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
  .show &gt; .btn-primary.dropdown-toggle {
    color: #fff;
    background-color: ##EB984E;
    border-color: ##EB984E;
  }
  
  .btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus,
  .show &gt; .btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem #EB984E;
  }
  
  .buttons input:focus {
    outline: none;
  }
  </code></pre>
  <p>What is missing to the entire button gets this orange color (#EB984E)?</p>