Manipulate the top property of Button

Question

I have a Button. On clicking, I want to change its top property by 25%. On clicking again, it should come back to the normal position. How can i do it?

Answer 1

$(function(){
  /* Set initial height to variable */
  var defaultTop = $("button.special").click(function(){
    /* On click, get current height */
    topVal = $(this).css("top").split("px")[0];
    /* If current height is different */
    if (topVal != defaultTop) {
      /* Reset height to original */
      $(this).css("top", (defaultTop+"px"));
    } else {
      /* Else, increase by a fourth of the value */
      $(this).css("top", ((Number(defaultTop) + Number((defaultTop/4)))+"px"));
    }
  }).css("top").split("px")[0];
});

button.special { position:relative; top:100px; }

<button class="special">Click Me!</button>