title: Reveal Icon Button - Bootstrap 3
body: <p>How to create a reveal icon inside button on hover in TB3. I tried to mimic this behavior using CSS transitions and position property. But I essentially need is to have a separate background color for icon and button. Here is what I am doing right now.</p>
  
  <p><strong>HTML Markup</strong></p>
  
  <pre><code>&lt;button class="btn btn-dark icon-revealed"&gt;
      &lt;span class="glyphicon glyphicon-cloud-download"&gt;&lt;/span&gt;
      Download
  &lt;/button&gt;
  </code></pre>
  
  <p><strong>CSS Code</strong></p>
  
  <pre><code>.btn.icon-revealed &gt; span {
      left: -30px;
      width: 0;
      -webkit-transition: all .5s ease-in-out;
      -moz-transition: all .5s ease-in-out;
      -o-transition: all .5s ease-in-out;
      -ms-transition: all .5s ease-in-out;
  }
  .btn.icon-revealed:hover &gt; span {
      width: 20%;
      -webkit-transform: translate(2em,0);
      -moz-transform: translate(2em,0);
      -o-transform: translate(2em,0);
      -ms-transform: translate(2em,0);
  }
  </code></pre>
  
  <p><strong>What I want to Achieve</strong></p>
  
  <p><a href="https://i.stack.imgur.com/YNzoQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YNzoQ.png" alt="enter image description here"></a></p>
  
  <p>Notice the background color of icon and button changed on hover state. I could not able to do that. How can I achieve this in TB3?</p>