← All Examples

Confirm Button

A two-stage destructive action button that uses a checkbox to reveal the confirm step.

Published July 17, 2026

Demo

Are you sure?

HTML

<input type="checkbox" id="confirm-toggle" class="confirm-input">
<label for="confirm-toggle" class="btn-danger">Delete</label>

<div class="confirm-panel">
  <p>Are you sure?</p>
  <button class="btn-yes">Yes</button>
  <label for="confirm-toggle" class="btn-cancel">Cancel</label>
</div>

CSS

.confirm-input { display: none; }

.confirm-panel { display: none; }

.confirm-input:checked ~ .confirm-panel {
  display: flex;
}

.confirm-input:checked ~ .btn-danger {
  opacity: .4;
  pointer-events: none;
}

How it works

A hidden checkbox stores the "are you sure?" state. The danger button is styled as a <label> that toggles the checkbox. When checked, CSS shows the confirmation panel using input:checked ~ .confirm-panel { display: flex; } and dims/disables the original button with pointer-events: none. The Cancel label unchecks the box. No JavaScript — just the checkbox pattern used as a two-state toggle.