JSFiddle - React, Tailwind, and code Playground

by Ronny

HTML

<script src="https://raw.github.com/LeaVerou/prefixfree/master/prefixfree.min.js"></script>
<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<button>Click me!</button>

CSS

body {background: #fff; color: #555; overflow: hidden; margin: 0;}
button {white-space: nowrap; padding: 10px 20px; box-shadow: 0 0 3px rgba(0,0,0,0.2); border: 1px solid #555; background: #eee; border-radius: 5px; position: absolute; top: 10px; left: 10px;}
button:hover {background: #ddd;}
button:active {background: #bbb; border-color: #000;}

JavaScript

function randomBetween(min, max){
    return min + parseInt( Math.random() * ((max - min) + 1));
}

// grab the button
$('button').click(function(){
    // you won!
    alert('SUCCESS!');
});

function runAway(){
    // determine new position
    var topEdge = 0,
        leftEdge = 0,
        rightEdge = $(window).width() - $(this).outerWidth(),
        bottomEdge = $(window).height() - $(this).outerHeight(),
        
        newTop = randomBetween(topEdge, bottomEdge),
        newLeft = randomBetween(leftEdge, rightEdge);
    
    // actually move
    $(this).animate({
        'left': newLeft + 'px',
        'top': newTop + 'px'
    }, randomBetween(50, 400), 'easeOutElastic');
}

$('button').mouseenter(runAway);