title: how to remove bootstrap 4 button click effect
body: <p>I have been facing this problem of removing bootstrap 4 box-shadow button effect, i did read some questions asked by other users here but couldn't find a solution to my problem. So i tried working with some CSS code i got from a site and i successfully removed the blue box-shadow effect from my button (when clicked) but i noticed that whenever a button is been clicked in my site, the button is been resized and set back to its normal size which i don't like.</p>
  
  <p><strong>my css</strong> </p>
  
  <pre><code>#ok_but {
      background-color: #50506F;
      border-color: #50506F;
  }
  #ok_but:hover   {
      background-color: #3C3C52;
  }
  
  .btn-primary.focus, .btn-primary:focus {
      -webkit-box-shadow: none!important;
      box-shadow: none!important;
      outline: 0;
  }
  </code></pre>
  
  <p><strong>my html</strong></p>
  
  <pre><code>&lt;button id="ok_but" class="btn btn-primary btn-block" name="login"&gt;
      Login
  &lt;/button&gt;
  </code></pre>