Mark as Read Envelope Checkbox

<label class="chk-mark-as-read-envelope">
  <input type="checkbox">
  <span class="chk-mark-as-read-envelope-env" aria-hidden="true">
    <i class="chk-mark-as-read-envelope-back"></i>
    <i class="chk-mark-as-read-envelope-paper"></i>
    <i class="chk-mark-as-read-envelope-front"></i>
    <i class="chk-mark-as-read-envelope-flap"></i>
    <i class="chk-mark-as-read-envelope-dot"></i>
  </span>
  <span class="chk-mark-as-read-envelope-text">Mark as read</span>
</label>

.chk-mark-as-read-envelope {
  --c: var(--chk-color, #3b82f6);
  font-size: var(--chk-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  line-height: 1.3;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  gap: 0.7em;}
.chk-mark-as-read-envelope input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.chk-mark-as-read-envelope-env {
  position: relative;
  flex: none;
  width: 1.8em;
  height: 1.25em;
  margin-top: 0.45em;
  border-radius: 0.18em;
  perspective: 5em;
}
.chk-mark-as-read-envelope-back,
.chk-mark-as-read-envelope-front {
  position: absolute;
  inset: 0;
  border-radius: 0.18em;
  transition: background-color 0.3s ease;
}
.chk-mark-as-read-envelope-back {
  background: color-mix(in srgb, currentColor 50%, #6b7280);
}
.chk-mark-as-read-envelope-front {
  z-index: 3;
  background: color-mix(in srgb, currentColor 30%, #9ca3af);
  clip-path: polygon(0 0, 50% 58%, 100% 0, 100% 100%, 0 100%);
}
.chk-mark-as-read-envelope-paper {
  position: absolute;
  z-index: 2;
  left: 0.22em;
  right: 0.22em;
  top: 0.12em;
  height: 1em;
  border-radius: 0.08em;
  background:
    linear-gradient(color-mix(in srgb, var(--c) 45%, transparent) 0 0) 0.18em 0.2em / 0.8em 0.08em no-repeat,
    linear-gradient(color-mix(in srgb, var(--c) 30%, transparent) 0 0) 0.18em 0.38em / 0.95em 0.08em no-repeat,
    #fff;
  transform: translateY(0);
  transition: transform 0.25s ease-in;
}
.chk-mark-as-read-envelope-flap {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  top: 0;
  height: 62%;
  border-radius: 0.18em 0.18em 0 0;
  background: color-mix(in srgb, currentColor 18%, #d1d5db);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top;
  transform: rotateX(0deg);
  transition: transform 0.35s cubic-bezier(0.5, 0, 0.3, 1) 0.2s, z-index 0s linear 0.3s, background-color 0.3s ease;
}
.chk-mark-as-read-envelope-dot {
  position: absolute;
  z-index: 5;
  top: -0.2em;
  right: -0.2em;
  width: 0.42em;
  height: 0.42em;
  border-radius: 50%;
  background: var(--c);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s;
}
.chk-mark-as-read-envelope-text {
  transition: opacity 0.3s ease;
}
.chk-mark-as-read-envelope input:checked ~ .chk-mark-as-read-envelope-text {
  opacity: 0.6;
}
.chk-mark-as-read-envelope input:checked + .chk-mark-as-read-envelope-env .chk-mark-as-read-envelope-back {
  background: color-mix(in srgb, var(--c) 60%, #000);
}
.chk-mark-as-read-envelope input:checked + .chk-mark-as-read-envelope-env .chk-mark-as-read-envelope-front {
  background: var(--c);
}
.chk-mark-as-read-envelope input:checked + .chk-mark-as-read-envelope-env .chk-mark-as-read-envelope-flap {
  z-index: 1;
  background: color-mix(in srgb, var(--c) 70%, #fff);
  transform: rotateX(180deg);
  transition: transform 0.35s cubic-bezier(0.5, 0, 0.3, 1), z-index 0s linear 0.18s, background-color 0.3s ease;
}
.chk-mark-as-read-envelope input:checked + .chk-mark-as-read-envelope-env .chk-mark-as-read-envelope-paper {
  transform: translateY(-0.5em);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.22s;
}
.chk-mark-as-read-envelope input:checked + .chk-mark-as-read-envelope-env .chk-mark-as-read-envelope-dot {
  transform: scale(0);
  transition: transform 0.2s ease-in;
}
.chk-mark-as-read-envelope input:focus-visible + .chk-mark-as-read-envelope-env {
  outline: 0.12em solid var(--c);
  outline-offset: 0.18em;
}

@media (prefers-reduced-motion: reduce) {
  .chk-mark-as-read-envelope, .chk-mark-as-read-envelope *, .chk-mark-as-read-envelope::before, .chk-mark-as-read-envelope::after, .chk-mark-as-read-envelope *::before, .chk-mark-as-read-envelope *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Similar checkboxes