I was testing stuff on AppHarbor and noticed interesting behavior of delete button. It looks like this:
Delete button

After clicking it turns to this:
enter image description here

And if you do nothing for couple seconds, it returns to previous state. How was it done?

Javascript is quite simple:

$.fn.confirm = function () {
   return this.one('click.delete', function (event) {
       var timeoutToken;
       var $this = $(this);
       var originalText = $this.text();
       var originalWidth = $this.closest(".delete").outerWidth();
       var confirmationText = $this.data('confirmation-text');
       var deleteButton = $this.text(confirmationText)
           .css('width', originalWidth);
       deleteButton.bind('mouseout.delete', function () {
           timeoutToken = setTimeout(function () {
               var duration = 300;
               var opacity = 0.5;
               $this.fadeTo(duration, opacity, function () {
       deleteButton.bind('mouseover.delete', function () {
(function($) {

What it does, it binds to buttons click event and when clicked, it prevents default action (submit), adds additional css class to button, takes confirmation text from data-confirmation-text attribute and unbinds current behavior for three seconds.

What I like in this approach, that user does not have to move mouse to center of screen to click OK.

HTML code for button is

<form action="Delete">
        <button type="submit" data-confirmation-text="Sure?" class="delete">
html  jquery