"Missile launch" button pattern name and implementation?

Question

I am curious about a specific confirmation pattern. The best way I could describe it is the "missile launch" pattern, where the user has to "arm" the button by removing some sort of cover before pressing it to perform the action.

Reddit implemented it a few years ago for one of their April fools.

I am aware of this question but it is a few years old and doesn't mention it.

• Is there a common name for this pattern?
• Is there a library that implements it for the web?

Edit 1: here is an example of the "disarm, fire" usage

Edit 2: In most use-cases, it is recommended to use classic, proven patterns. This is not a proven pattern

Edit 3: Here is a minimal jsfiddle implementing this pattern.

Answer 1

Short answer is that I don't think it exists because it is a redundant design pattern due to the history of skeuomorphism in interface deisgn.

Long answer:

I am curious as to whether this type of design pattern is still used these days, as it is probably a type of skeuomorphism that tries to mimic the behaviour of something like this in real life called a button switch guard

.

People probably more commonly associated it with a Nuclear Button, although I guess it is a bit disappointing that it probably doesn't exist in real life...

Now in a digital environment, there is no need to apply this level of skeuomorphism because there are already existing patterns as you mentioned like the confirm to delete popup that serves exactly the same function (i.e. getting an additional confirmation before performing an action in case it was an accident).

It doesn't serve any additional purpose or benefit, and in fact there are better strategies to achieve the same outcome without an additional trigger/action such as using biometrics that require a specific contact point for a set period of time or something like a phone unlock pattern that requires a specific series of actions that is very difficult to trigger randomly.

So I think you would called it a skeuomorphic call-to-action confirmation design pattern that is implemented as a button switch guard.

You might find examples on Dribbble, Code My UI or CodePen and other Javascript/CSS code demo sites.

Answer 2

This is essentially an animated overlay that protects an interactive element from accidental use. While it is rare to see it on a button, it used to be fairly common on video player elements. Somewhat like the "play button" icon that lays on top of a video and only when a user clicks are they displayed with the actual video controls to interact with; like in this example.

While there is no library for producing the exact example or just a general overlay library, it's not that complex to recreate this using CSS and jquery. Someone actually recreated the entire r/thebutton experiment in this jsfiddle. In this case, they put a background image overlay on the button's ::before selector that is switched to an unlock background image on hover and removed on click using JS.