<button class="btn-board">
  <span class="btn-board-main">
    <span class="btn-board-route">
      <span class="btn-board-iata">SFO</span>
      <svg
        class="btn-board-arrow"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        aria-hidden="true"
      >
        <path d="M2 12h18M14 5l7 7-7 7" />
      </svg>
      <span class="btn-board-iata">JFK</span>
    </span>
    <span class="btn-board-barcode" aria-hidden="true"></span>
  </span>
  <span class="btn-board-tear" aria-hidden="true"></span>
  <span class="btn-board-stub">
    <span class="btn-board-stub-label">SEAT</span>
    <span class="btn-board-stub-val">14A</span>
  </span>
</button>

.btn-board {
  position: relative;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: #0c2340;
  color: #fdf6e9;
  font-family: ui-monospace, monospace;
  cursor: pointer;
  display: inline-flex; align-items: stretch;
  box-shadow: 0 6px 16px rgba(12,35,64,0.4);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  overflow: hidden;
}
.btn-board-main {
  display: flex; flex-direction: column;
  padding: 12px 18px 10px;
  gap: 8px;
}
.btn-board-route {
  display: flex; align-items: center; gap: 10px;
  font-size: 16px; font-weight: 800;
  letter-spacing: 0.12em;
}
.btn-board-arrow { width: 20px; height: 14px; color: #e84a8a; }
.btn-board-iata { color: #fdf6e9; }
.btn-board-barcode {
  display: block;
  height: 14px;
  background: repeating-linear-gradient(90deg,
    #fdf6e9 0 2px,
    transparent 2px 3px,
    #fdf6e9 3px 4px,
    transparent 4px 7px,
    #fdf6e9 7px 8px,
    transparent 8px 10px);
  opacity: 0.95;
}
.btn-board-tear {
  position: relative;
  width: 0;
  border-left: 2px dashed rgba(253,246,233,0.35);
  margin: 6px 0;
}
.btn-board-tear::before, .btn-board-tear::after {
  content: '';
  position: absolute;
  left: -7px; width: 12px; height: 12px;
  background: #17171f;
  border-radius: 50%;
}
.btn-board-tear::before { top: -12px; }
.btn-board-tear::after  { bottom: -12px; }
.btn-board-stub {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 12px 18px;
  background: linear-gradient(180deg, rgba(232,74,138,0.18), rgba(232,74,138,0.05));
  border-left: 1px solid rgba(232,74,138,0.4);
  gap: 2px;
}
.btn-board-stub-label {
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.22em;
  color: #e84a8a;
}
.btn-board-stub-val {
  font-size: 18px; font-weight: 900;
  letter-spacing: 0.04em;
  color: #fdf6e9;
}
.btn-board:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(12,35,64,0.55);
}