title: Bootstrap Button Primary stays blue for a second when clicked or active, even when overwritten
body: <p>I'm trying to change the colour of a button to a custom colour. The button is using bootstrap's btn-primary class. I overwritten every possible state I could find and think of to this custom colour, but when I click the button it still stays blue for a second or two, before it changes back to the custom colour.</p>
  
  <p>Here is the CSS I used for it:</p>
  
  <pre><code>.btn-primary {
      padding: 16px;
      padding-right: 40px;
      padding-left: 40px;
      color: #fff;
      background-color: #A8CC6B;
      border-color: #A8CC6B;
      margin-left: 50px;
  }
  .btn-primary:focus,
  .btn-primary.focus {
          color: #fff;
          background-color: #A8CC6B;
          border-color: #A8CC6B;
      }
  .btn-primary:hover {
          color: #fff;
          background-color: #657D41;
          border-color: #657D41;
      }
  .btn-primary:active,
  .btn-primary.active,
  .open &gt; .dropdown-toggle.btn-primary {
          color: #fff;
          background-color: #A8CC6B;
          border-color: #A8CC6B;
      }
  .btn-primary:active:hover,
  .btn-primary.active:hover,
  .open &gt; .dropdown-toggle.btn-primary:hover,
  .btn-primary:active:focus,
  .btn-primary.active:focus,
  .open &gt; .dropdown-toggle.btn-primary:focus,
  .btn-primary:active.focus,
  .btn-primary.active.focus,
  .open &gt; .dropdown-toggle.btn-primary.focus {
          color: #fff;
          background-color: #A8CC6B;
          border-color: #A8CC6B;
      }
  .btn-primary:active,
  .btn-primary.active,
  .open &gt; .dropdown-toggle.btn-primary {
      background-image: none;
      background-color: #A8CC6B;
          border-color: #A8CC6B;
  }
      .btn-primary.disabled:hover,
      .btn-primary[disabled]:hover,
      fieldset[disabled] .btn-primary:hover,
      .btn-primary.disabled:focus,
      .btn-primary[disabled]:focus,
      fieldset[disabled] .btn-primary:focus,
      .btn-primary.disabled.focus,
      .btn-primary[disabled].focus,
      fieldset[disabled] .btn-primary.focus {
          background-color: #A8CC6B;
          border-color: #A8CC6B;
      }
  </code></pre>
  
  <p>I have to admit I have no idea of what half of these do, and I think it is very ugly and I would be more then happy not to commit all this to sc. Appreciate if anyone have a better work around for this. Using a custom div instead of the button is not an option as per business requirement..</p>