CSS3 Modal Button
This example shows a CSS3-based modal button that prevents accidental destructive actions, such as launching a missile, by requiring two clicks within a 500-millisecond window to confirm the action. The first click changes the button’s label to “Are you sure?” and applies a pulsing animation, while moving the mouse out cancels the confirmation. Implemented with plain HTML, CSS3 transitions and keyframe animations, and native JavaScript event listeners, the code directly manipulates the button’s class and innerHTML to toggle its visual state and reset after five seconds.
AI-generated descriptionA frequent challenge in user interface design is how to avoid accidental destructive actions. Destructive actions are non-undoable; for example, you might want to allow the user to delete a file, and once deleted the file cannot be restored. JavaScript provides some simple facilities for this, such as the 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.