CodePen

HTML

            
                
  <div id = "button">
    Click me
  </div>
  



<!-- Developed by Thanakron Tandavas, 2013 --!>
            
          
!
via HTML Inspector

CSS

            
              
#button
{
  margin: 100px auto 0 auto;
  width: 250px;
	height: 50px;
	color: white;
  font-size: 25px;
  line-height: 50px;
  text-align: center;
  -webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	background-color: rgb(102, 123, 188);
	-webkit-box-shadow: 0px 7px 0px rgba(68, 97, 173, 1.0);
	-moz-box-shadow: 0px 7px 0px rgba(68, 97, 173, 1.0);
	box-shadow: 0px 7px 0px rgba(68, 97, 173, 1.0);
}






            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $(document).ready(function() {
  
  //get the element
  var $button = $('#button');
  //get current margin-top of element
  var marginMax = parseFloat($button.css('marginTop'));
  //calc how up button goes
  var marginMin = (marginMax - 5) + "px";
  
  
  function initJumpButton() {
    $button.animate({marginTop: marginMin}, 'fast');
    $button.animate({marginTop: marginMax}, 'fast');
  }
  
  initJumpButton();
  
  //set interval for repeating jumpButton
  var timer = setInterval(initJumpButton, 200);
  
  //clear repeating
  $button.on('click', function() {
    clearInterval(timer);
    $button.stop(true);
  });
  
})


            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................