<!DOCTYPE html>
<html>
	<head>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

        <link rel="stylesheet" href="style.css" />
        <script src='script.js'></script>
		<title></title>
	</head>
	<body>
     <div id = 'main'>
         <button id = 'button'></button>
     </div>
     
	</body>
</html>
#main{
    width: 500px;
    height: 300px;
    background: white;
    border:solid;
}

#button{
    position:fixed;
    width: 100px;
    height: 100px;
    background-image: url('http://www.kafkabrigade.org.uk/wp-content/uploads/2011/07/button-pic.jpg');
    border-radius:50px;
    background-size:100px;
    background-position:-2px,-20px;
    left:200px;
    top:100px;
    box-shadow:5px 5px 5px #888;
}
leftgo = true;
topgo = true;

$(document).ready(function() {
	// your code here
    $('#button').click(function(){
        alert("You deserve a prize!");
    });
    $('#button').hover(function(){
        var left = parseInt($('#button').css('left').replace("px", ""));
        if(leftgo){
            $('#button').animate({left:'-=100'},50);
            if(left <= 100){
                leftgo = !leftgo;
            }
        }
        else{
            $('#button').animate({left:'+=100'},50);
            if(left >= 400){
                leftgo = !leftgo;
            }
        }
        var top = parseInt($('#button').css('top').replace("px", ""));
        if(topgo){
            $('#button').animate({top:'-=100'},50);
            if(top <= 150){
                topgo = !topgo;
            }
        }
        else{
            $('#button').animate({top:'+=100'},50);
            if(top >= 100){
                topgo = !topgo;
            }
        }
    });


});
Created from scratch
916 forks
40431 views

Browse more Codebits