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) {
       event.preventDefault();
       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)
           .addClass('confirm-deletion')
           .css('width', originalWidth);
       deleteButton.bind('mouseout.delete', function () {
           timeoutToken = setTimeout(function () {
               var duration = 300;
               var opacity = 0.5;
               $this.fadeTo(duration, opacity, function () {
                   deleteButton.text(originalText)
                   .unbind('.delete')
                   .removeClass('confirm-deletion')
                   .removeAttr("style")
                   .confirm();           
               });
           },
           3000);
       });
       deleteButton.bind('mouseover.delete', function () {
           clearTimeout(timeoutToken);
       });        
   })
   .removeClass('confirm-deletion');
};
(function($) {
    $('button.delete').confirm();
})(jQuery);

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">
            <strong>Delete</strong>
            <span></span>
        </button>
 </form>
Comments html  jquery