Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

How to make Jquery or CSS3 Animated "Catch me if you can" button?

How to make Jquery or CSS3 Animated "Catch me if you can" button?

Problem

I would like to create an animation button by using pure CSS or Jquery to make a joke for my visitors on April 1th. Basically, this will be regular button but when user hover on, it will move rapidly to the other side of the mouse. It is a simple game. But it should not be so difficult to catch. User may click on it if he/she try hard :)

Can anyone help me to create this?

Thank you!

Problem courtesy of: Meg Ann

Solution

Something like this:

$("button").mouseover(function(){
    $(this).css({
        left:(Math.random()*300)+"px",
        top:(Math.random()*300)+"px",
    });
}); 

Demo: http://jsfiddle.net/ZQamp/


Thanks to @roXon suggestion with much more better animation: http://jsfiddle.net/ZQamp/3

Solution courtesy of: Eli

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

How to make Jquery or CSS3 Animated "Catch me if you can" button?

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×