css - Replace button with a loading gif -

im trying replace submit button loading.gif cannot in anyway put in same place. looks button hidden space still reserved.

my 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> 

my jquery code is:

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

and css is:

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

could give me on it?

i think best solution instead of adding seperate "loading" element, add class button makes button appear loading icon.

for example: http://jsfiddle.net/4rlgw/1/

html:

<div class="botao">    <button id="bt_pagamento" class="bl_button" title="efetuar pagamento"></button> </div> 

css:

.bl_button {     background: url('images/bl_button.jpg') no-repeat 50% 50%;     height: 35px; /* height of button image */     width: 100px; /* width of button image */ }  .button_loading {     background: url('images/loading.gif') no-repeat 50% 50%;     /* apply other styles "loading" buttons */ } 

jquery:

$("#bt_pagamento").click(function () {     $(this).addclass('button_loading'); }); 

here working example: http://jsfiddle.net/4rlgw/1/

when button clicked, .button_loading class applied button, , background image changed ajax loading icon. can add specific styling loading button make more unique.