Skip to content
Aurora Lab
Buttons · 11.10.2026

Paper Check

A compact editorial button feels like a paper tab pressed onto a page. Its offset underlay and slight tactile movement make the action feel physical, while the label changes to a clear confirmation after activation.

Interactive preview

960 × 640
About this effect

What is Paper Check?

A single paper-like action button with an offset print layer and an inline confirmation state. The physical response stays subtle enough for everyday editorial interfaces.

How it’s built

The underlay is created with a pseudo-element and box shadow, while hover, focus, and active states shift the button by a few pixels. JavaScript toggles the pressed state and replaces the label without changing the surrounding layout.

Ideal for

  • Review and approval actions
  • Save controls in editorial tools
  • Compact confirmation buttons

Accessibility

The native button element provides keyboard and screen-reader behavior. The pressed state is exposed with aria-pressed, and the focus ring remains visible against the paper surface.

Performance

The interaction uses one small event listener and hardware-friendly transforms. There are no images, fonts, libraries, or continuous animations.

Source code

Explore, copy and reuse the original HTML, CSS and JavaScript.

<div class="showcase"><div class="specimen"><div class="specimen__meta"><span>REVIEW QUEUE</span><span>ISSUE 04 / 12</span></div><div class="specimen__rule"></div><div class="specimen__copy"><p class="specimen__eyebrow">A considered finish</p><h1>Keep the page<br><em>moving forward.</em></h1><p class="specimen__description">A small confirmation for work that has earned its place in the archive.</p></div><button class="paper-check" type="button" aria-pressed="false"><span class="paper-check__label">Mark as reviewed</span><span class="paper-check__note" aria-hidden="true">✓</span></button><p class="specimen__caption">Tap once to record your review</p></div></div>