Capitolo 01
Anatomia di un bottone
Un bottone non è un rettangolo cliccabile. È una promessa di azione, un piccolo contratto fisico tra dito e schermo. Lo smontiamo qui, pezzo per pezzo.
C’è una scena in Ratatouille dove il critico assaggia il piatto e per un attimo torna bambino. Un bottone fatto bene fa qualcosa di simile: non lo noti, eppure quando lo premi ti torna in mente che le cose, quelle vere, hanno un peso.
In questo primo capitolo apriamo il bottone come si apre un orologio: cosa lo fa sembrare premibile, quando il movimento aiuta e quando si mette in mezzo, perché un cerchio che ruota è quasi sempre la risposta sbagliata.
Cosa rende un bottone “tattile”
Tre cose, in ordine di importanza:
- Una superficie credibile. Un’ombra che suggerisce sollevamento dal piano. Mai piatto, mai sospeso a mezz’aria.
- Una reazione al tocco. Premerlo deve produrre un cambiamento — non un altro colore, ma meno spazio. Si schiaccia, come una vera superficie morbida.
- Un ritorno onesto. Quando lo lasci, torna su con un’inerzia leggera. Non istantaneo (sembra finto), non lento (sembra rotto).
Bottone primario · soft press
Tre stati visibili: a riposo (ombra media, scala 1), al hover (lieve sollevamento + ombra più profonda), alla pressione (ombra interna + scala 0.97). La transizione su transform e box-shadow usa la curva out-snappy per 180 ms — abbastanza veloce da sembrare reattivo, abbastanza lento da essere percepito.
Il segreto è la pressione: la scala scende a 0.97, non a 0.95. Pochi millesimi di differenza, ma il primo sembra “premuto”, il secondo “rotto”.
Quando il bottone diventa l’azione
Il pattern più stanco del web è il bottone con uno spinner dentro. Funziona, ma comunica una cosa sbagliata: aspetta, sto facendo. Più onesto e più appagante è far diventare il bottone stesso l’azione: si restringe, lavora, e torna con un esito.
Bottone async · morph & resolve
Tre stati: idle → loading → done. Nel passaggio a loading il bottone non mostra uno spinner: diventa uno spinner — collassa in cerchio, gira, e poi si trasforma in check. La inline-size è animata con curva out-snappy (280 ms): più veloce e sembra glitch, più lento e sembra impacciato.
Il path del check ha stroke-dasharray animato — il segno viene tracciato davanti agli occhi, non semplicemente apparso. È un dettaglio gratuito che cambia tutto il tono.
L’arte di chiamare l’attenzione senza farla notare
Una pagina ha sempre più cose di quante ne servano. Il bottone “vero”, quello che chiede una decisione, deve emergere — ma non gridare. Il pattern magnetic fa esattamente questo: da fermo è normale, ma quando il cursore lo avvicina, lui si fa vivo.
Bottone magnetic · attenzione gentile
L’attrazione è dosata: strength: 0.4 — il bottone si sposta del 40 % della distanza dal centro al cursore. Più di così sembra “appiccicoso”, meno e l’effetto non si percepisce. Il preset snappy dà al ritorno un’inerzia da pulsante meccanico.
Il vero trucco non è il movimento: è il halo. Si attiva al hover, suggerisce campo magnetico anche prima che il cursore arrivi sopra. Da fermo, il bottone è solo un bottone — è il rapporto con il cursore che lo accende.
Conferme che non rompono il flusso
Aprire un modal per “sei sicuro?” è un atto di violenza. Oscura tutto, blocca lo scroll, sposta il focus. Per un’azione distruttiva semplice — eliminare una nota — è troppo. La conferma può vivere dentro lo stesso bottone.
Conferma in-place · senza modal
Click sul bottone idle → il pulsante si trasforma rivelando Sicuro? + due azioni inline. Il rosso resta presente solo nel verbo Sì, elimina: l’attenzione segue l’azione critica, non l’intero contenitore.
Auto-cancel dopo 4 secondi: se l’utente cambia idea, basta lasciar fare al tempo. Niente “stati appiccicosi”, niente decisioni forzate. Lo stato di conferma è una finestra di intenzione, non un menu modale.
Tooltip che escono dal bottone, non gli si appiccicano accanto
I tooltip che “spuntano” da un punto magico vicino al cursore sono un pattern stanco. Più appagante è farli crescere dal bottone stesso — transform-origin ancorato al bordo, scala da 0.6 a 1, opacità 0 → 1. Visivamente sembra che il tooltip sia uscito dal bottone, non sia comparso accanto.
Icon button · tooltip che cresce
Trigger: hover con 280 ms di delay (gli utenti che attraversano il bottone non vogliono il tooltip) + focus immediato (chi naviga con tastiera ha bisogno della label adesso). Chiusura senza delay: deve sparire prima del prossimo hover.
Il tooltip è puramente decorativo. Il vero label è in aria-label: gli screen reader devono leggere sempre l’azione, non aspettare un hover che non avverrà mai.
L’aptica simulata
Il telefono vibra quando lo tocchi; il browser no. Ma il cervello accetta una vibrazione visiva come surrogato — se è abbastanza breve. Una micro-bounce sull’icona (320 ms, da 1 a 1.45 a 1) e un’onda d’impatto radiale sono sufficienti a far sembrare il click un evento fisico, non un cambio di colore.
Toggle preferito · feedback aptico visivo
Tre cose succedono insieme nello stesso istante: il fill dell’icona si imbeve di rosso, l’icona fa una bounce con scale 1 → 1.45 → 0.9 → 1, e una scia radiale si espande dietro. Sono tre segnali ridondanti, ma il cervello li integra in una sensazione di tatto.
Bonus: navigator.vibrate(8) chiama la vibrazione hardware su mobile quando il browser la espone. Ottava di millisecondo: percepibile ma non fastidiosa. La micro-bounce continua a lavorare anche su desktop, dove la vibrazione non c’è.
Un bottone non è un rettangolo cliccabile. È un piccolo contratto fisico tra dito e schermo. Onorarlo è l’inizio di tutto il resto.