title: how to keep button's border displayed and after click other area it goes away
body: <p>Just like the effect on the documentation, but it is an a-tag, which has to be use href attribute. 
  I have two questions
  1.for pseudo-class a-tag to serve as a button, how do I prevent it from jump to # block. 
  2. If I use button class, after first click it first time, how to keep it in focus state, and then after click it second time, it will go back original state...</p>
  
  <pre><code>.btn,.btn-primary{
      width: 110px;
      font-size: 0.9em;
      color: black !important;
      background-color: white !important;
  }
  
  .btn,.btn-primary:active,.btn,.btn-primary:focus{
      font-weight: bold;
      background-color:white;
      color:black;
      border-color:#4477b1 !important;
      border-width: 2px !important;
  }
  </code></pre>
  
  <p>this is my html:</p>
  
  <pre><code>&lt;button type="button" class="btn btn-primary ml-4 active" data-toggle="button" aria-pressed="true" (click)=display()&gt;{{buttonContent}}&lt;/button&gt;
  </code></pre>
  
  <p>this picture shows after first click
  <a href="https://i.stack.imgur.com/jRUes.png" rel="nofollow noreferrer">after first click</a></p>