Pressline Review
Una CTA testuale per la revisione trasforma una pressione deliberata in una conferma tipografica compatta. L’etichetta passa da «Invia in revisione» a «Revisione richiesta», mentre la sottolineatura cremisi si ispessisce per un istante e la freccia si trasforma in un segno di spunta. Nessun riquadro distrae dall’interazione con il testo.
Prova l’esperimento
Cos’è Pressline Review?
Una CTA senza contenitore usa la tensione della sottolineatura e una risposta fisica alla pressione per rendere immediato l’invio in revisione. L’azione si chiude con una conferma persistente senza spostare il layout.
Come funziona
Al passaggio del mouse o con il focus, la sottolineatura cremisi si estende verso la freccia. La pressione comprime il controllo in verticale, poi sostituisce l’etichetta e trasforma la freccia in un segno di spunta; la sottolineatura dorata indica lo stato completato.
Dove usarlo
- Inviare un articolo o una prova grafica alla revisione
- Portare avanti un flusso editoriale di approvazione
- Confermare un passaggio di consegne senza aprire un’altra superficie
Accessibilità
Il controllo è un vero pulsante con nome accessibile esplicito, focus da tastiera visibile, semantica dello stato premuto e conferma testuale persistente. Chi preferisce ridurre il movimento vede lo stesso cambio di stato senza transizioni.
Prestazioni
L’interazione usa trasformazioni CSS e pseudo-elementi, con un solo listener al clic protetto e senza risorse esterne o librerie.
Il codice
Esplora e copia il codice originale. Nell’anteprima le etichette vengono tradotte, mentre nel sorgente restano quelle originali (di solito inglesi). Per i testi dinamici usa AuroraLabI18n.t(chiave, testoPredefinito).
<main class="stage"><button class="review-action" type="button" aria-label="Send to review" aria-pressed="false"><span class="review-label" data-ali-i18n="copy_1">Send to review</span><span class="review-mark" aria-hidden="true"><span class="review-arrow">↗</span><span class="review-check">✓</span></span></button></main>:root{--bg:#F1EDE6;--fg:#16131A;--muted:#5E5765;--raspberry:#DF284D;--violet:#62447D;--gold:#F5BA09;--underline-size:3px}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0}body{background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.stage{min-height:100vh;width:100%;display:grid;place-items:center;padding:clamp(24px,8vw,88px)}.review-action{--press-y:0px;position:relative;display:inline-flex;align-items:center;gap:clamp(12px,2vw,20px);min-height:58px;padding:10px 0 18px;border:0;background:transparent;color:var(--fg);font:650 clamp(1.35rem,3.2vw,2.25rem)/1.05 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:-.045em;cursor:pointer;transform:translateY(var(--press-y));transition:color .28s ease,transform .12s ease}.review-action::after{content:"";position:absolute;left:0;right:28px;bottom:5px;height:var(--underline-size);background:var(--raspberry);transform-origin:left center;transition:transform .42s cubic-bezier(.2,.8,.2,1),height .2s ease,right .42s cubic-bezier(.2,.8,.2,1)}.review-action:hover,.review-action:focus-visible{color:var(--raspberry)}.review-action:hover::after,.review-action:focus-visible::after{right:0;transform:scaleY(1.35)}.review-action:active{--press-y:3px;transition-duration:.06s}.review-action:active::after{height:5px;transform:scaleY(1)}.review-action:focus-visible{outline:2px solid var(--violet);outline-offset:8px;border-radius:2px}.review-mark{position:relative;display:inline-grid;place-items:center;width:1.15em;height:1.15em;color:var(--raspberry);font-size:.8em;letter-spacing:0;transform:translateY(1px);transition:transform .3s ease,color .3s ease}.review-arrow,.review-check{grid-area:1/1;transition:opacity .24s ease,transform .38s cubic-bezier(.2,.8,.2,1)}.review-check{opacity:0;transform:scale(.5) rotate(-18deg)}.review-action.is-complete{color:var(--violet);cursor:default}.review-action.is-complete::after{right:0;background:var(--gold);transform:scaleY(1)}.review-action.is-complete .review-arrow{opacity:0;transform:translate(5px,-5px) scale(.65)}.review-action.is-complete .review-check{opacity:1;transform:scale(1) rotate(0)}.review-action.is-complete .review-mark{color:var(--violet)}@media(max-width:480px){.stage{padding:28px}.review-action{font-size:clamp(1.25rem,7vw,1.75rem);gap:11px;padding-bottom:16px}.review-action::after{right:22px}}@media(prefers-reduced-motion:reduce){.review-action,.review-action::after,.review-arrow,.review-check,.review-mark{transition:none}.review-action:active{transform:none}}var button=document.querySelector('.review-action');var label=button&&button.querySelector('.review-label');function copy(key,fallback){return window.AuroraLabI18n&&typeof window.AuroraLabI18n.t==='function'?window.AuroraLabI18n.t(key,fallback):fallback}if(button&&label){button.addEventListener('click',function(){if(button.classList.contains('is-complete'))return;button.classList.add('is-complete');button.setAttribute('aria-pressed','true');button.setAttribute('aria-label',copy('copy_2','Review requested'));label.textContent=copy('copy_2','Review requested')})}