Java-Scripts.net

Runaway Button Effect

A classic prank script. The "Runaway Button" uses DHTML positioning to dodge the mouse cursor, making it frustratingly impossible to click.

Try to click the button below:

Copy the Script

<style>
#dodgyBtn { position: absolute; }
</style>

<script>
function moveButton(elem) {
    var x = Math.random() * (window.innerWidth - 100);
    var y = Math.random() * (window.innerHeight - 50);
    elem.style.left = x + "px";
    elem.style.top = y + "px";
}
</script>

<button id="dodgyBtn" onmouseover="moveButton(this)">Catch Me!</button>

Frequently Asked Questions

The script listens for the 'mouseover' event. As soon as the mouse touches the element, the script generates random Top and Left CSS coordinates and applies them instantly.

In this demo, no. However, you could add logic to stop the effect after 5 moves or allow the user to catch it by pressing a specific key.

Not well. Mobile devices rely on 'touch' rather than 'hover', so the user would likely tap the button before it has a chance to move.