<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<label class="ticket-punch" aria-label="Confirm ticket">
  <input type="checkbox">
  <span class="ticket-mark">
    ✓
  </span>
  <span class="ticket-copy">
    ADMIT ONE
  </span>
</label>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.ticket-punch{display:flex;align-items:center;width:178px;height:68px;overflow:hidden;border-radius:11px;background:#fff3dc;color:#272228;font-family:Arial;cursor:pointer;box-shadow:7px 7px 0 #29242b}.ticket-punch input{position:absolute;opacity:0}.ticket-mark{display:grid;place-items:center;width:67px;height:68px;background:#7a63e7;color:transparent;font-size:30px;transition:.25s}.ticket-copy{padding-left:18px;border-left:2px dashed #d4c09d;font-size:16px;font-weight:800;letter-spacing:1px}.ticket-punch:hover{transform:translate(-2px,-2px);box-shadow:9px 9px 0 #29242b}.ticket-punch input:checked~.ticket-mark{background:#51c998;color:#fff}.ticket-punch input:checked~.ticket-copy{color:#51a477}.ticket-punch:has(input:checked){transform:translate(4px,4px);box-shadow:3px 3px 0 #29242b}