Boarding Pass
Airline-navy ticket with three-letter airport codes, a flight-path arrow, magenta tear-line stub, and a real barcode strip along the bottom.
Boarding Pass the 33rd of 43 designs in the 43 CSS Button Designs collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<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);
}