confirm dialog box, but modal interfaces are annoying and disruptive: they force the user to confirm or cancel the prompt before doing anything else, even accessing another browser tab or window.
Taking a queue from the elegant solution in iOS, here is a modal button. The button serves as its own confirmation dialog by asking “Are you sure?” on the first click. If the user clicks again, then the action is performed. Otherwise, the user can simply mouseout to cancel. CSS3 transitions and animations (in WebKit) are used to draw visual attention to confirmation. Note that unlike popup dialog boxes, the user conveniently does not need to move the mouse to confirm the action.
One subtlety in the implementation: users may inadvertently double-click on the button. This should not be interpreted as confirmation, so the click handler forces a 500ms delay before allowing confirmation.
Live demo please