← All elements
<div class="cf"><input type="checkbox" id="cf"><label for="cf" class="del">Delete account</label><div class="ask"><span>Sure?</span><label for="cf" class="yes">Yes</label><label for="cf" class="no">Cancel</label></div></div>About this button
A destructive button that asks for confirmation first by revealing Yes and Cancel through a checkbox state.
How it works
A hidden checkbox remembers whether the person has clicked the first button. When it is checked, the Delete label fades and scales away and a confirmation row with Yes and Cancel appears in its place. Both outcomes are labels for the same checkbox, so Cancel simply unchecks it.
Ways to customise it
- Change the texts of the three labels.
- Edit the colours of the Yes and Cancel buttons.
- Use a link on the Yes label to perform the real action.
Good to know
This shows the interaction only. In a real product the Yes control must submit a request, and you should not rely on CSS to protect a destructive action. Keep Cancel easy to reach.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.