Why doesn't input type=button revert back to its original state?

Question

css

From the category of quick?
I prefer to use buttons designed as links (a) - they are easy to style and don't have to bother..
but here I decided to try input type=button inside the form, but so that without reloading the page - ajaxom..
So for some reason it doesn't "shoot off". ..
I click on it - the background changes to white and that's it .. until you click past it, it does not return to its original state ...
I suppose that this is because of its original purpose? a la submit - the page is reloaded and it returns to its original state?

<form id="links" name="links" method="post" class="form forma_short">
        <input type="button"   class="btn"  id="add-btn" value="Кнопа">     
            </form>

form input[type="button"] {
  text-align:center;
}
.btn {
  display: block;
  height:auto;
  width:150px;
  background-color:#2C3E50;
  color:#D3D3D3;
  font-size:1em;
  text-transform:uppercase;
    padding: 10px;
    margin-bottom: 10px;
}

$('#add-btn').on('click', function(e) {
           	data=$('#links').serialize();
                $.ajax({
                            type: "POST",
                            url: "../handler_temp.php",
                            data: {
                                data: data,
                                operation: 'add'
                            },
                            success: function(data, textStatus){
                        	  $('#debug').html(data);
                            }
            });
      }); // конец #add click

tricks?

Answer 1

:focus override.