title: Odd visual effect (little line shows) when hovering over button in browser
body: <p>We have a few buttons on a web page that have this odd little line show up on the right side when you hover over the button.  It only affects the first two (out of three) buttons.  This could be because there is not fourth button, i.e. the effect may be showing only because there is an adjacent button.  This seems to happen in all browsers.</p>
  
  <p>Attached are some screen shots showing the little line. 
  <img src="https://i.stack.imgur.com/IA3p3.png" alt="Button1 showing odd line"> 
  <img src="https://i.stack.imgur.com/2KyWu.png" alt="Button2 showing odd line"></p>
  
  <p>I made a <a href="http://jsfiddle.net/57jxzsnf/" rel="nofollow noreferrer">JSFiddle sample</a> showing the problem.</p>
  
  <p>Or here is the Stack JSFiddle, too (didn't know it would do this):</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>element.style {
      margin-top: 4px;
      text-decoration: none;
      width: 75px;
  }
  *:before, *:after {
      box-sizing: border-box;
  }
  *:before, *:after {
      box-sizing: border-box;
  }
  .btn-m {
      background-color: rgb(220, 211, 188);
      border-color: rgb(120, 97, 68);
      color: rgb(69, 39, 0);
  }
  .btn-xs, .btn-group-xs &gt; .btn {
      border-radius: 3px;
      font-size: 12px;
      line-height: 1.5;
      padding: 1px 5px;
  }
  .btn {
      -moz-user-select: none;
      background-image: none;
      border: 1px solid transparent;
      border-radius: 4px;
      cursor: pointer;
      display: inline-block;
      font-size: 14px;
      font-weight: normal;
      line-height: 1.42857;
      margin-bottom: 0;
      padding: 6px 12px;
      text-align: center;
      vertical-align: middle;
      white-space: nowrap;
  }
  .btn-m {
      background-color: rgb(220, 211, 188);
      border-color: rgb(120, 97, 68);
      color: rgb(69, 39, 0);
  }
  .btn-xs, .btn-group-xs &gt; .btn {
      border-radius: 3px;
      font-size: 12px;
      line-height: 1.5;
      padding: 1px 5px;
  }
  .btn {
      -moz-user-select: none;
      background-image: none;
      border: 1px solid transparent;
      border-radius: 4px;
      cursor: pointer;
      display: inline-block;
      font-size: 14px;
      font-weight: normal;
      line-height: 1.42857;
      margin-bottom: 0;
      padding: 6px 12px;
      text-align: center;
      vertical-align: middle;
      white-space: nowrap;
  }
  input, button, select, textarea {
      font-family: inherit;
      font-size: inherit;
      line-height: inherit;
  }
  button, html input[type="button"], input[type="reset"], input[type="submit"] {
      cursor: pointer;
  }
  button, select {
      text-transform: none;
  }
  button {
      overflow: visible;
  }
  button, input, optgroup, select, textarea {
      color: inherit;
      font: inherit;
      margin: 5px;
      text-decoration: none;
  }
  * {
      box-sizing: border-box;
  }
  a {
      color: #000000;
  }
  a {
      color: #000000;
  }
  a {
      color: #428bca;
  }
  body {
      font-family: Tahoma,Verdana,sans-serif;
  }
  body {
      font-family: Tahoma,Verdana,sans-serif;
  }
  body {
      color: #333;
      font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
      font-size: 14px;
      line-height: 1.42857;
  }
  html {
      font-size: 62.5%;
  }
  html {
      font-family: sans-serif;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
  &lt;div style="position: absolute;top: 58px;left: 100px;"&gt;
  &lt;a href="log.php?Range=Today"&gt;
  &lt;button class="btn btn-m btn-xs" type="button" style="margin-top:4px; width: 75px; text-decoration: none;" title="Display records for Today only."&gt;Today&lt;/button&gt;
  &lt;/a&gt;
  
  &lt;button class="btn btn-m btn-xs" title="Display records for last 7 days." style="margin-top:4px; width:85px;" type="button"&gt;Last 7 Days   &lt;/button&gt;
  
      &lt;a href=""&gt;
          &lt;button title="week." type="button"&gt;Week&lt;/button&gt;
      &lt;/a&gt;
      
  &lt;a href="log.php?Range=ThisMonth"&gt;
  &lt;button class="btn btn-m btn-xs" title="Display records from the first of the month through today." style="margin-top:4px; width:85px;" type="button"&gt;This Month&lt;/button&gt;
  &lt;/a&gt;
  &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>For the CSS be aware that I just copied and pasted the CSS from the Firebug CSS window.  The computed CSS that I had posted before was not showing all the values.  Yes, the CSS is repetitive; we have a number of different sources/files defining things so they get repeated.  The pasted result from Firebug makes that distinction hard to see, though.  And the pasted version may be inverted?  I.e. the 'inherited from HTML..' stuff at the bottom in the Fiddle is (I am guessing) actually the first thing that gets evaluated, and Firebug just inverts the CSS evaluation order (more useful for humans).  </p>
  
  <p>In doing a quick bit of fiddling, it appears that it is coming from the anchor tags.  If I remove the wrapping anchor tag from the button defintion, the line goes away.  (Oddly, on the JSFIddle, the mystery line shows up all the time, even when not hovering.  Makes it a bit easier to see the issue I suppose.)  I also created a new element and stuck it in there for some other testing.  Whatever; the issue is still visible.  </p>
  
  <p>Any thoughts on what is causing the line or how to clean it up?</p>
  
  <p>Thanks,
  J</p>