<button><a href="#modal">Open modal using label + checkbox</a></button>
<div class="modal" id="modal">
  <h1>Modal</h1>
  <button><a href="#">close</a></button>
</div>

<button><label for="modal2">Open modal using anchor link</label></button>
<input type="checkbox" id="modal2" class="checkbox" />
<div class="modal">
  <h1>Modal</h1>
  <button><label for="modal2">close</label></button>
</div>
<div class="mask"></div>

.modal {
  width: 50vw;
  height: 50vh;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background: white;
  z-index: 1;
}

.checkbox {
  display: none;
}

.checkbox:checked + .modal,
.modal:target {
  display: block;
}

.mask {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.25);
  display: none;
  z-index: 0;
}

.checkbox:checked + .modal ~ .mask,
.modal:target ~ .mask {
  display: block;
}