Il pulsante d’invio
Pulsanti, Transizioni, SVG
NuovaGratis
Tutti i componenti
Il pulsante diviso
Un'azione e i modi di farla nello stesso pulsante: la freccia a destra apre un menu che si srotola dal pulsante, la spunta scivola sul modo scelto e il modo diventa l'azione, con le parole che rotolano e il pulsante che prende la loro larghezza. Premuto, unisce con una barra che corre lungo il fondo, poi diventa viola, la freccia si ripiega e dice Merged.
Il codice
Una cartella che funziona da sola: index.html, style.css, script.js e le librerie da CDN. Nelle schede React e Vue la stessa demo è già un componente, che spegne le sue animazioni quando esce dalla pagina.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The split button</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/hubot-sans@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the split button: the action on the left, the arrow on the right opens the ways to do it; the chosen way
becomes the action, and pressed, the button merges and turns purple -->
<div class="split" data-split data-autoclic>
<span class="split__frame" aria-hidden="true" data-frame></span>
<div class="split__btn" role="group" aria-label="Merge" data-group>
<button class="split__main" type="button" data-main>
<span class="split__icon" aria-hidden="true" data-icon></span>
<span class="split__label"><span class="split__word" data-word>Merge pull request</span></span>
<span class="split__bar" aria-hidden="true" data-bar></span>
</button>
<button class="split__caret" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="merge-menu" aria-label="Choose how to merge" data-caret>
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 10l5 5 5-5"/></svg>
</button>
</div>
<div class="split__menu" id="merge-menu" role="menu" aria-label="How to merge" data-menu hidden>
<span class="split__tick" aria-hidden="true" data-tick><svg viewBox="0 0 24 24"><path d="M5 12.6l4.3 4.3L19 7.2"/></svg></span>
<button class="split__option" type="button" role="menuitemradio" aria-checked="true" tabindex="-1" data-option="merge" data-action="Merge pull request">
<span class="split__title">Create a merge commit</span>
<span class="split__text">All 3 commits from this branch go into main with a merge commit.</span>
</button>
<button class="split__option" type="button" role="menuitemradio" aria-checked="false" tabindex="-1" data-option="squash" data-action="Squash and merge">
<span class="split__title">Squash and merge</span>
<span class="split__text">The 3 commits are combined into one commit on main.</span>
</button>
<button class="split__option" type="button" role="menuitemradio" aria-checked="false" tabindex="-1" data-option="rebase" data-action="Rebase and merge">
<span class="split__title">Rebase and merge</span>
<span class="split__text">The 3 commits are replayed on top of main, one by one.</span>
</button>
</div>
<p class="split__hint"><span data-hint>3 commits ready to go into main</span></p>
<p class="sr" aria-live="polite" data-say></p>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="script.js"></script>
</body>
</html>Playground
Cambia valori, colori e testi con le manopole e guarda l’animazione rispondere dal vivo. Oppure scrivi tu nel codice. Poi scarica la cartella con le tue modifiche.
18 valori da cambiare
Oppure chiedila a Claude Code
Col connettore di Animorio, Claude Code la prende da qui con tutta la sua guida e la adatta al tuo progetto. Incolla questa richiesta:
Prendi «Il pulsante diviso» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero un pulsante verde in due parti: a sinistra un disegno e Merge pull request, a destra, dopo una riga sottile, una freccia in giù; sotto, la riga 3 commits ready to go into main. La freccia apre un menu scuro che si srotola verso il basso, coi tre modi che entrano uno dopo l'altro (Create a merge commit, Squash and merge e Rebase and merge, ognuno con la sua spiegazione) e la spunta che compare sul modo scelto, mentre la freccia si gira all'insù. Scegliendo un altro modo la spunta scivola su di lui, il menu si richiude e la scritta del pulsante rotola sul nome del modo, mentre il pulsante si allarga o si stringe sulle parole nuove e il disegno gira lasciando il posto al suo. Premendo la parte sinistra la scritta diventa Merging, il disegno diventa un cerchio aperto che gira e una barra chiara corre lungo il fondo del pulsante; finito, il pulsante diventa viola, la freccia si ripiega fino a sparire, la scritta dice Merged e il pulsante fa un piccolo balzo, mentre la riga sotto dice Merged into main. Dopo un momento torna verde, con la freccia e il modo scelto.
Come funziona
Due pulsanti in un gruppo
L'azione e la freccia sono due button in un gruppo con un solo colore di fondo, così il verde e il viola cambiano insieme, e con overflow hidden sugli angoli tondi; la luce del passaggio è uno strato bianco sopra ognuno dei due, al 9% di opacità.
Il menu che si srotola
Il menu si apre con un clip-path inset che scende dall'alto (da inset(0% 0% 100% 0%) a inset(0%), con gli angoli tondi), una scala da 0,95 a 1 ed expo.out in UNFOLD secondi; i tre modi entrano dal basso a 0,05 secondi l'uno dall'altro, e la freccia gira di 180 gradi.
Una spunta sola
La spunta è una sola per tutto il menu: si mette all'altezza del modo scelto (offsetTop) e, scegliendone un altro, ci scivola con power3.inOut; dopo 0,28 secondi il menu si richiude, la scritta rotola sul nome nuovo e l'azione prende la sua larghezza, misurata con una copia invisibile delle parole.
L'unione
Premendo, il disegno diventa un cerchio aperto che gira e una barra di 3 pixel si allunga da sinistra in MERGE secondi (scaleX con l'origine a sinistra). Poi il colore del gruppo passa al viola, la freccia si stringe fino a larghezza zero e il gruppo passa per 1,05 di scala; dopo DONE secondi torna verde, con la freccia e il modo scelto.
Tastiera e anteprima
Il menu segue lo schema del menu a pulsante: freccia in giù o in su sulla freccia lo apre e porta sul modo scelto o sull'ultimo, le frecce girano fra i modi, Home e Fine vanno ai capi, Escape lo richiude e torna alla freccia, Tab lo richiude. Una pressione fuori lo richiude. Un clic da script (l'anteprima della libreria) apre il menu, poi sceglie il modo dopo, poi unisce.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
MERGE | script.js | 1.4 | I secondi che dura l'unione. |
DONE | script.js | 2.2 | I secondi in cui il pulsante resta viola prima di tornare pronto. |
UNFOLD | script.js | 0.45 | I secondi che il menu impiega a srotolarsi. |
Quando usarla
Per un'azione principale che ha delle varianti: unire o pubblicare in modi diversi, salvare o salvare con nome, inviare ora o più tardi, scaricare in formati diversi, prenotare con o senza colazione.
Sul telefono
Il menu è largo 340 pixel, o lo schermo meno 32, centrato sotto il pulsante; un tocco fuori lo richiude, e ogni modo, con la sua spiegazione, è alto più di 60 pixel, comodo per il dito.
Con il movimento ridotto
Il menu compare e sparisce di colpo, la spunta salta sul modo scelto, le parole e i disegni cambiano senza rotolare né girare, il cerchio dell'attesa sta fermo e alla fine il viola arriva senza balzo; la barra dell'unione corre lo stesso, perché dice quanto manca.
Trappole
- Il menu è fuori dal flusso della pagina: per l'anteprima della libreria una cornice invisibile (data-frame) tiene il posto del menu aperto, o la foto lo taglierebbe.
- Disabilitare un pulsante che ha il fuoco fa perdere il fuoco alla pagina: durante l'unione si usa aria-disabled e i clic si ignorano.
- Un clip-path con gli angoli tondi deve avere la stessa forma all'inizio e alla fine (inset(… round 14px)), o GSAP non sa passare dall'uno all'altro.
- Il colore messo da GSAP resta scritto sull'elemento: per tornare al verde si legge di nuovo la variabile del CSS, così segue anche un verde cambiato.
- La freccia e il menu sono due elementi diversi: una pressione fuori deve escluderli tutti e due, o la pressione sulla freccia chiuderebbe il menu che il suo clic riapre subito.
Librerie
GSAP 3.15.0, Hubot Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 6,4 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 4 ottobre 2026
- Computer: Fatto
- Telefono: Fatto
- Movimento ridotto: Fatto
- Safari su iPhone: Fatto
Licenza d’uso
Puoi usarla nei tuoi progetti e in quelli dei tuoi clienti. Non puoi rivenderla né ridistribuirla così com’è. GSAP resta sotto la sua licenza Standard. Licenza completa.
