Ticket Button
A ticket-shaped button with notches cut at the perforation and a price stub that wobbles every few seconds as if half torn. Press and it tears further. The notches are two intersected radial masks.
Also known as: ticket shape css, coupon button css, admit one ticket button.
HTML
<button class="btn-ticket" type="button"> <span class="btn-ticket-main">Get tickets</span> <span class="btn-ticket-stub">$49</span> </button>
CSS
.btn-ticket {
--c: var(--btn-color, #3b82f6);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5em;
padding: 0.75em 1.6em;
border: 0;
border-radius: 0.6em;
font: 600 var(--btn-size, 18px)/1.1 system-ui, sans-serif;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
gap: 0;
padding: 0;
border-radius: 0;
background: transparent;
color: #fff;
filter: drop-shadow(0 0.3em 0.4em color-mix(in srgb, var(--c) 30%, transparent));
transition: transform 0.2s ease;}
.btn-ticket-main,
.btn-ticket-stub {
--notch:
radial-gradient(circle at var(--x) 0, transparent 0.42em, #000 calc(0.42em + 1px)),
radial-gradient(circle at var(--x) 100%, transparent 0.42em, #000 calc(0.42em + 1px));
display: flex;
align-items: center;
height: 3em;
background: var(--c);
-webkit-mask: var(--notch);
-webkit-mask-composite: source-in;
mask: var(--notch);
mask-composite: intersect;
}
.btn-ticket-main {
--x: 100%;
padding: 0 1.25em 0 1.5em;
border-radius: 0.55em 0 0 0.55em;
}
.btn-ticket-stub {
--x: 0;
padding: 0 1.15em 0 1em;
border-left: 2px dashed rgba(255, 255, 255, 0.6);
border-radius: 0 0.55em 0.55em 0;
background: color-mix(in srgb, var(--c) 78%, #000);
font-weight: 800;
transform-origin: 0 100%;
animation: btn-ticket-wobble 3.6s ease-in-out infinite;
transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn-ticket:is(:hover, :focus-visible) .btn-ticket-main { background: color-mix(in srgb, var(--c) 88%, #fff); }
.btn-ticket:active .btn-ticket-stub {
animation: none;
transform: translateX(0.25em) rotate(12deg);
}
@keyframes btn-ticket-wobble {
0%, 32%, 100% { transform: rotate(0deg); }
7% { transform: rotate(7deg); }
14% { transform: rotate(0.5deg); }
20% { transform: rotate(3.5deg); }
26% { transform: rotate(0.3deg); }
}
@media (prefers-reduced-motion: reduce) {
.btn-ticket, .btn-ticket *, .btn-ticket::before, .btn-ticket::after, .btn-ticket *::before, .btn-ticket *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--btn-coloron the element or a parent. Currently previewing#3b82f6. - Base size: set
--btn-size. Every other dimension is inem, so the whole thing scales together. Currently previewing18px. - 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.