Fri 14 Nov, 21:00
Lisbon Jazz Nights
Hall B, row 7, seat 12
Admit one
Ticket Card Hover
An event ticket with punched notches and a perforated stub that starts to tear away on hover. The notches are radial-gradient masks, and a drop-shadow on the wrapper follows the cut shape.
Also known as: ticket css design, event ticket hover, tear off ticket stub.
HTML
<article class="hfx-card-ticket-stub">
<div class="hfx-card-ticket-stub-main">
<span>Fri 14 Nov, 21:00</span>
<h3>Lisbon Jazz Nights</h3>
<p>Hall B, row 7, seat 12</p>
</div>
<div class="hfx-card-ticket-stub-stub"><strong>Admit one</strong></div>
</article>CSS
.hfx-card-ticket-stub {
--c: var(--hfx-color, #3b82f6);
font-size: var(--hfx-size, 16px);
display: flex;
color: #1f2937;
font-family: system-ui, sans-serif;
filter: drop-shadow(0 0.25em 0.35em color-mix(in srgb, #000 18%, transparent));
}
.hfx-card-ticket-stub > div {
--hfx-card-ticket-stub-notch: radial-gradient(circle 0.6em at var(--hfx-card-ticket-stub-side) 0, #0000 97%, #000) top / 100% 51% no-repeat,
radial-gradient(circle 0.6em at var(--hfx-card-ticket-stub-side) 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
-webkit-mask: var(--hfx-card-ticket-stub-notch);
mask: var(--hfx-card-ticket-stub-notch);
transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hfx-card-ticket-stub-main {
--hfx-card-ticket-stub-side: 100%;
box-sizing: border-box;
width: 12em;
padding: 0.95em 1.1em 1em;
border-radius: 0.7em 0 0 0.7em;
background: #fff;
transform-origin: 100% 100%;
}
.hfx-card-ticket-stub-stub {
--hfx-card-ticket-stub-side: 0%;
display: grid;
place-items: center;
width: 3.6em;
border-left: 2px dashed color-mix(in srgb, #fff 60%, transparent);
border-radius: 0 0.7em 0.7em 0;
background: var(--c);
color: #fff;
transform-origin: 0 100%;
}
.hfx-card-ticket-stub:hover .hfx-card-ticket-stub-main { transform: rotate(-1.5deg); }
.hfx-card-ticket-stub:hover .hfx-card-ticket-stub-stub { transform: translateX(0.3em) rotate(9deg); }
.hfx-card-ticket-stub-main span {
font-size: 0.7em;
font-weight: 600;
color: var(--c);
}
.hfx-card-ticket-stub h3 {
margin: 0.3em 0 0.35em;
font-size: 1.05em;
font-weight: 700;
}
.hfx-card-ticket-stub p {
margin: 0;
font-size: 0.75em;
color: #6b7280;
}
.hfx-card-ticket-stub strong {
font-size: 0.62em;
letter-spacing: 0.18em;
text-transform: uppercase;
writing-mode: vertical-rl;
transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
.hfx-card-ticket-stub, .hfx-card-ticket-stub *, .hfx-card-ticket-stub::before, .hfx-card-ticket-stub::after, .hfx-card-ticket-stub *::before, .hfx-card-ticket-stub *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--hfx-coloron the element or a parent. Currently previewing#3b82f6. - Base size: set
--hfx-size. Every other dimension is inem, so the whole thing scales together. Currently previewing16px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.