Bottoni · 11.10.2026
Paper Check
Un pulsante editoriale compatto sembra una linguetta di carta premuta sulla pagina. Il livello sfalsato e il lieve movimento tattile rendono l’azione fisica, mentre l’etichetta passa a una conferma chiara dopo l’attivazione.
Anteprima interattiva
Informazioni sull’effetto
Cos’è Paper Check?
Un unico pulsante dall’aspetto cartaceo, con livello di stampa sfalsato e conferma direttamente nel componente. La risposta fisica resta abbastanza discreta per l’uso quotidiano in interfacce editoriali.
Come è costruito
Il livello sottostante nasce da uno pseudo-elemento e da un’ombra, mentre gli stati hover, focus e pressione spostano il pulsante di pochi pixel. JavaScript alterna lo stato premuto e sostituisce l’etichetta senza modificare il layout circostante.
Ideale per
- Azioni di revisione e approvazione
- Controlli di salvataggio negli strumenti editoriali
- Pulsanti compatti di conferma
Accessibilità
L’elemento button nativo garantisce il comportamento da tastiera e per gli screen reader. Lo stato premuto è comunicato con aria-pressed e l’anello di focus resta visibile sulla superficie chiara.
Prestazioni
L’interazione usa un solo listener e trasformazioni efficienti per l’hardware. Non ci sono immagini, font esterni, librerie o animazioni continue.
Codice sorgente
Esplora, copia e riutilizza HTML, CSS e JavaScript originali.
<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>:root{--stage:#F1EDE6;--surface:#EEEAE4;--ink:#16131A;--muted:#5E5765;--accent:#62447D;--accent-soft:#B79BD4;--paper:#F4EFF8;--tab:#DF284D;--tab-offset:8px;--radius:2px}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{background:var(--stage)}.showcase{width:960px;height:640px;max-width:100vw;max-height:100vh;overflow:hidden;background:var(--stage);color:var(--ink);font-family:Arial,sans-serif;display:grid;place-items:center;padding:48px}.specimen{position:relative;width:min(100%,680px);min-height:440px;padding:42px 56px 48px;background:var(--surface);border:1px solid #D9D3CC;box-shadow:0 20px 44px #16131A14}.specimen:before{content:"";position:absolute;inset:10px -10px -10px 10px;border:1px solid #62447D33;z-index:0;pointer-events:none}.specimen>*{position:relative;z-index:1}.specimen__meta{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.18em}.specimen__rule{height:1px;background:#62447D66;margin:15px 0 58px}.specimen__copy{max-width:450px}.specimen__eyebrow{margin:0 0 14px;color:var(--accent);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}.specimen h1{margin:0;font:400 clamp(38px,5vw,54px)/.98 Georgia,serif;letter-spacing:-.045em}.specimen h1 em{color:var(--accent);font-style:italic}.specimen__description{max-width:330px;margin:23px 0 34px;color:var(--muted);font:16px/1.45 Georgia,serif}.paper-check{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:18px;min-height:58px;padding:0 20px 0 22px;color:var(--ink);background:var(--paper);border:1px solid var(--accent);border-radius:var(--radius);box-shadow:var(--tab-offset) var(--tab-offset) 0 var(--tab);font:700 14px/1 Arial,sans-serif;letter-spacing:.01em;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,background .2s ease,color .2s ease}.paper-check:before{content:"";position:absolute;z-index:-1;inset:5px -7px -7px 7px;border:1px solid #62447D4D;transform:rotate(-1.2deg);pointer-events:none}.paper-check:hover{transform:translate(-3px,-3px);box-shadow:calc(var(--tab-offset) + 3px) calc(var(--tab-offset) + 3px) 0 var(--tab)}.paper-check:focus-visible{outline:2px solid var(--accent);outline-offset:6px}.paper-check:active{transform:translate(var(--tab-offset),var(--tab-offset));box-shadow:0 0 0 var(--tab)}.paper-check__note{display:grid;place-items:center;width:22px;height:22px;border:1px solid currentColor;border-radius:50%;font:700 13px/1 Arial,sans-serif;transition:background .2s ease,color .2s ease}.paper-check.is-done{background:var(--accent);color:var(--paper)}.paper-check.is-done .paper-check__note{background:var(--paper);color:var(--accent)}.specimen__caption{margin:22px 0 0;color:var(--muted);font-size:10px;letter-spacing:.12em;text-transform:uppercase}@media(max-width:700px){.showcase{padding:28px}.specimen{padding:32px 30px 38px}.specimen__rule{margin-bottom:44px}}@media(max-width:480px){.showcase{padding:18px}.specimen{min-height:0;padding:28px 24px 34px}.specimen h1{font-size:38px}.specimen__meta{font-size:9px}.paper-check{max-width:100%;padding-left:16px;padding-right:16px;gap:12px}}document.querySelectorAll('.paper-check').forEach(button=>{button.addEventListener('click',()=>{const done=button.classList.toggle('is-done');button.setAttribute('aria-pressed',String(done));button.querySelector('.paper-check__label').textContent=done?'Reviewed':'Mark as reviewed';});});