css - ボタンを読み込み中の gif に置き換える

Question

送信ボタンを loading.gif に置き換えようとしていますが、とにかく同じ場所に置くことはできません。ボタンが隠されているように見えますが、スペースはまだ確保されています。

私のhtmlは

<div class="botao">
  <input type="image" disabled src="images/bl_button.jpg" id="bt_pagamento" alt="EFETUAR PAGAMENTO" title="EFETUAR PAGAMENTO" /> 
</div>
<div class="loading">
  <input type="image" src="images/loading.gif" id="bt_loading" alt="CARREGANDO PAGAMENTO" title="CARREGANDO PAGAMENTO" />
</div>

私のjQueryコードは次のとおりです。

$("#bt_pagamento").click(function () {
                                      $(this).css({'display':'none'});
                                     $("#bt_loading").show();
                });

そして私のCSSは：

#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;
}

誰か助けてくれませんか？