title: Replace button with a loading gif
body: <p>Im trying to replace the submit button with a loading.gif but I cannot in anyway put it in the same place. It looks like that the button is hidden but the space is still reserved. </p>
  
  <p>My html is </p>
  
  <pre><code>&lt;div class="botao"&gt;
    &lt;input type="image" disabled src="images/bl_button.jpg" id="bt_pagamento" alt="EFETUAR PAGAMENTO" title="EFETUAR PAGAMENTO" /&gt; 
  &lt;/div&gt;
  &lt;div class="loading"&gt;
    &lt;input type="image" src="images/loading.gif" id="bt_loading" alt="CARREGANDO PAGAMENTO" title="CARREGANDO PAGAMENTO" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My jQuery code is:</p>
  
  <pre><code>$("#bt_pagamento").click(function () {
                                        $(this).css({'display':'none'});
                                       $("#bt_loading").show();
                  });
  </code></pre>
  
  <p>And my CSS is:</p>
  
  <pre><code>#main_content .pagamentos .botao {
  width: 151px;
  height: 33px;
  float: left;
  margin: 20px 0 20px 325px;
  text-align: center;
  }
  
  #main_content .pagamentos .loading {
  width: 151px;
  height: 33px;
  float: left;
  margin: 20px 0 20px 325px;
  text-align: center;
  }
  </code></pre>
  
  <p>Could someone give me some help on it? </p>