title: Strange highlight of a button in webpage
body: <p>I tried styling a website and when I press TAB to go through the buttons a strange highlight occurred. it supposed to be just the border of the button, but in the image provided it does not look that way. I would be happy if you could let me know why.
  Here are the css and the html iamges of the code/design.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.pagination-buttons {
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translate(-50%, 0);
  }
  
  .pagbut {
    background-color: white;
    width: 16px;
    height: 8px;
    border: 1px solid #06d6a0;
    border-radius: 100px;
    cursor: pointer;
  }
  
  .button-fill {
    background-color: #06d6a0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>      &lt;div class="pagination-buttons pagi-design"&gt;
          &lt;button class="pagbut"&gt;&amp;nbsp;&lt;/button&gt;
          &lt;button class="pagbut button-fill"&gt;&amp;nbsp;&lt;/button&gt;
          &lt;button class="pagbut"&gt;&amp;nbsp;&lt;/button&gt;
          &lt;button class="pagbut"&gt;&amp;nbsp;&lt;/button&gt;
        &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><img src="https://i.stack.imgur.com/Z3c0F.png" alt="IMAGE of strange shape that forms." /></p>