title: How to create an overlay for a button
body: <p>I'm having trouble creating an overlay style for a Bootstrap button.</p>
  
  <p>I have the following button code:</p>
  
  <pre><code>&lt;button id="btnTest" class="btn btn-primary"&gt;
      &lt;span class="fa fa-certificate"&gt;&lt;/span&gt;
      &amp;nbsp;
      Test
      &lt;div class="btn-overlay"&gt;
          &lt;i class="fa fa-refresh fa-spin"&gt;&lt;/i&gt;
      &lt;/div&gt;
  &lt;/button&gt;
  </code></pre>
  
  <p>That's the layout of the button I'd like and I've implemented the following CSS:</p>
  
  <pre><code>.btn-overlay {
      position: absolute;
      padding: 0;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #ffffff;
      opacity: 0.5;
      transition: opacity .5s;
  }
  </code></pre>
  
  <p>This make the overlay cover the entire container div (not sure how that's happening) and not just overlaying the entire button.</p>
  
  <p>Any idea what I'm doing wrong here? Once I get the overlay part I'll worry about centering the <code>fa-refresh</code> icon.</p>