title: Problems with css transition between span
body: <p>I am trying to change a text in a button <a href="http://jsfiddle.net/jo3Lga0b/" rel="nofollow" title="HERE">HERE</a>. The transition in the color works fine, but the transition on the span positions do not work.  </p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;style&gt;
  #btnIniciarFacturacion{
      width: 200px;
      height: 30px;
  }
  
  #btnIniciarFacturacion {
     position: relative;
      -webkit-transition:  2s; 
      transition: 2s; 
      overflow: hidden;
  
  }
  .btnIniciarFacturacion-content {
      position: absolute;
      left:0;
      top:0;
      font-size: 20px;
      font-weight: bolder;
  }
  
  #btnIniciarFacturacion:hover{
      background-color: orange;
  }
  #btnIniciarFacturacion .btnIniciarFacturacion-top{
      top:0;
  }
  #btnIniciarFacturacion:hover .btnIniciarFacturacion-top{
      top:-50px;
  }
  #btnIniciarFacturacion .btnIniciarFacturacion-bottom {
      top:50px;
  }
  #btnIniciarFacturacion:hover .btnIniciarFacturacion-bottom {
      top:0px;
  }
  &lt;/style&gt;
  &lt;button class="" id="btnIniciarFacturacion"&gt;
    &lt;span class="btnIniciarFacturacion-top btnIniciarFacturacion-content" id="spanTotalFacturado"&gt; TOTAL !@#&lt;/span&gt;
    &lt;span class="btnIniciarFacturacion-bottom btnIniciarFacturacion-content"&gt;Iniciar Facturación&lt;/span&gt;
   &lt;/button&gt;
  </code></pre>