Coupon Card — Free HTML CSS JS Snippet

The perforated ticket is the universal visual shorthand for a discount — a coloured stub carrying the offer, a dashed tear line with punched holes, and a code the user can grab. This component builds the complete e-commerce coupon in HTML, CSS, and vanilla JavaScript: the ticket illusion in pure CSS, a copy-to-clipboard button with success feedback and a legacy fallback, a live HH:MM:SS expiry countdown, and a greyed-out expired state the card enters automatically when time runs out.

The punch-hole illusion

The ticket effect needs two things: a perforation and the two semicircular notches where a real coupon would be torn. The perforation is simply a border-right: 2px dashed on the stub. The notches are the card's own ::before and ::after pseudo-elements — 22px circles filled with the *page background colour*, absolutely positioned half-in half-out at the top and bottom of the divider line (top: -11px / bottom: -11px, centred on the stub edge with translateX(-50%)). Because they match the backdrop, they read as holes cut through the card. The one constraint of this classic technique: the circles must track the page background, so on a patterned backdrop you would switch to mask-image: radial-gradient() cut-outs instead — the trade-off is noted so you can pick per context.

Copy-to-clipboard done properly

The copy button calls navigator.clipboard.writeText() — the modern async API — inside a try/catch that falls back to the hidden-textarea document.execCommand('copy') trick for non-secure contexts (plain HTTP, some embedded webviews) where the Clipboard API is unavailable. On success the button swaps its copy icon for a checkmark, turns green, and relabels to "Copied!", reverting after 1.6 seconds. The two icons are both in the markup with CSS toggling their display off the .copied class, so no SVG is created at runtime — the same pattern as the standalone copy button.

The live countdown

A setInterval computes the remaining milliseconds against a fixed expiresAt timestamp each second — recomputing from Date.now() rather than decrementing a counter, so the timer cannot drift and survives tab throttling correctly. Hours, minutes, and seconds are derived with integer division and modulo, zero-padded with padStart, and rendered with tabular-nums so digits do not jiggle as they change. Storing an absolute expiry (as your backend would supply) rather than a duration is what makes the countdown honest across reloads.

The expired state

When the countdown hits zero the interval stops, the label reads "expired", and one class on the root repaints the whole card: the stub gradient desaturates to grey, the code gets struck through, the copy button greys out (and its handler exits early), and the urgency timer loses its red. Encoding expiry as a single class keeps the state change atomic — nothing can end up half-expired.

Urgency signals

The card carries the two proven scarcity cues: the red countdown ("Expires in 04:12:45") and a "3 uses left" pill — the same psychology as the stock urgency bar and trial countdown. Both are static-markup easy to feed from your promotions API.

Customisation

Change the stub gradient and percentage, set expiresAt from your API's ISO timestamp (new Date(iso).getTime()), and wire the copy handler to also apply the code straight to the cart — pair it with the promo code input at checkout. The stub, holes, and dashed line are all sized off the single 128px flex-basis, so widening the stub moves everything consistently.