# Pulsanti a gradiente in CSS che sembrano di qualità

[Canonical HTML page](https://gradiently.design/it/guide/css-gradient-button)

Quasi tutti i pulsanti a gradiente sembrano dozzinali per gli stessi pochi motivi: troppe tonalità, un hover che salta e testo che sparisce nell’estremo chiaro. Ecco la ricetta che li evita tutti e tre.

## The short version

- Un pulsante a gradiente di qualità di solito sfuma due tonalità vicine con luminosità simile, con un debole riflesso lungo il bordo superiore.
- I gradienti non possono fare transizioni, quindi un hover fluido sposta un gradiente sovradimensionato con background-position oppure dissolve un livello sovrapposto con opacity.
- Il testo bianco su un pulsante a gradiente richiede almeno 4,5:1 di contrasto rispetto alla parte più chiara del gradiente, non solo a quella più scura.
- Uno stato premuto può essere semplice come spostare il pulsante in basso di un pixel e togliere l’ombra esterna.
- I pulsanti a gradiente funzionano meglio come unica azione principale di una schermata, con le azioni secondarie tenute piatte o con solo il contorno.

Scrivere il **CSS per un pulsante a gradiente** di qualità si riduce alla sobrietà. Scegli due tonalità vicine con luminosità simile, aggiungi un debole riflesso lungo il bordo superiore, sposta il gradiente all’hover invece di sostituirlo e controlla che il testo si legga sulla parte più chiara. La versione rumorosa, con i bordi arcobaleno, è facile da fare e facile da riconoscere come modello; quella sobria è ciò che fa sembrare finito un prodotto.

```css
.button {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.75em 1.4em;
  border: 0;
  border-radius: 999px;
  color: #fff;
  font-weight: 600;
  background-color: #4f46e5;
  background-image: linear-gradient(110deg, #4f46e5, #9333ea 50%, #4f46e5);
  background-size: 200% 100%;
  background-position: 0% 50%;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.25),
    0 6px 16px -6px rgb(79 70 229 / 0.6);
  transition: background-position 0.5s ease, transform 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
}

.button:hover {
  background-position: 100% 50%;
}

.button:active {
  transform: translateY(1px);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.2);
}
```

La ricetta completa: un gradiente a doppia larghezza che scorre all’hover, un riflesso in alto, un’ombra colorata e uno stato premuto.

Da indaco a viola e ritorno: `linear-gradient(110deg, #4f46e5, #9333ea 50%, #4f46e5)`

Il gradiente del pulsante a larghezza piena. A riposo vedi la metà sinistra; all’hover scorre verso la metà destra, che finisce di nuovo sull’indaco.

## Pulsanti a gradiente sobri e decisi

Un pulsante sobrio usa due tonalità vicine sul cerchio cromatico, come indaco e viola, così il gradiente si legge come profondità e non come decorazione. Un pulsante deciso attraversa tonalità lontane e diventa la cosa più colorata della pagina. Il deciso può funzionare per un singolo momento di lancio o per un brand giocoso; il sobrio funziona in tutti gli altri casi. Ogni palette qui sotto mantiene il testo bianco sopra 4,5:1 a entrambi gli estremi.

- Sobrio: da indaco a viola: `linear-gradient(110deg, #4f46e5, #9333ea)`
- Sobrio: da blu reale a verde acqua: `linear-gradient(110deg, #1d4ed8, #0e7490)`
- Caldo: da cremisi ad arancio bruciato: `linear-gradient(110deg, #be123c, #c2410c)`
- Deciso: da viola a magenta: `linear-gradient(110deg, #9333ea, #c026d3)`

Gradienti per pulsanti che mantengono leggibile il testo bianco. Punti misurati: 6,3 e 5,4, 6,7 e 5,4, 6,3 e 5,2, 5,4 e 4,7 a 1.

## Contrasto del testo sui pulsanti a gradiente

Un verificatore di contrasto prende un solo colore di sfondo, ma un pulsante ha una gamma. Controlla il colore del testo rispetto al punto più chiaro, perché è lì che l’etichetta è più debole. Il testo di un pulsante di dimensione normale richiede 4,5:1 secondo le WCAG, e il [verificatore di contrasto di WebAIM](https://webaim.org/resources/contrastchecker/) rende rapida la verifica di ogni punto. Il problema tipico è un gradiente caldo che finisce in giallo o arancione chiaro, che sembra energico e lascia illeggibile metà dell’etichetta.

### Da evitare

- Da arancione a giallo, #f97316 a #fbbf24, sotto testo bianco: 2,8 e 1,7 a 1
- Gradienti pastello chiari con etichette bianche
- Controllare solo il colore dietro la prima lettera
- Font sottili e leggeri su un gradiente affollato

### Da fare

- Punti profondi con luminosità simile, come da cremisi ad arancio bruciato
- Testo scuro sui gradienti pastello
- Controllare il punto più chiaro e il punto medio
- Pesi di 600 o più per le etichette sui gradienti

Altri dettagli su calcoli e soglie sono in [contrasto dei colori e accessibilità](https://gradiently.design/it/guide/color-contrast-accessibility), e la stessa regola vale per qualsiasi [testo su uno sfondo a gradiente](https://gradiently.design/it/guide/text-on-gradient).

## Stati hover fluidi per i pulsanti a gradiente

`background-image` non fa transizioni: sostituisci un gradiente con un altro all’hover e scatta. Ci sono due alternative fluide. La prima, usata nella ricetta qui sopra, è dipingere il gradiente il doppio più largo e far scorrere `background-position`. La seconda è mettere il gradiente dell’hover su uno pseudo-elemento e sfumarne l’opacità, adatta agli hover che cambiano del tutto colore.

```css
.button--fade {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-image: linear-gradient(110deg, #be123c, #c2410c);
}

.button--fade::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(110deg, #c2410c, #be123c);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.button--fade:hover::before {
  opacity: 1;
}
```

Un hover con dissolvenza incrociata. L’opacità è economica da animare, e l’etichetta resta sopra il livello sovrapposto.

Tieni piccoli i cambiamenti all’hover. Un gradiente che si sposta un po’ e un’ombra che si approfondisce leggermente sembrano reattivi; un pulsante che cambia del tutto tonalità sembra instabile. Se aggiungi un movimento continuo, come un lento luccichio, disattivalo per chi preferisce il [movimento ridotto](https://gradiently.design/it/guide/reduced-motion).

## Bordi, contorni e pulsanti secondari

Un pulsante a gradiente per schermata di solito è giusto: segna l’azione principale. Le azioni secondarie stanno meglio in uno stile con solo il contorno, che riprende il gradiente in un bordo sottile. Due sfondi, uno ritagliato sul padding box e uno sul border box, danno un contorno a gradiente arrotondato con il centro pieno.

```css
.button--outline {
  border: 2px solid transparent;
  border-radius: 999px;
  color: #312e81;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(110deg, #4f46e5, #9333ea) border-box;
}
```

Un contorno a gradiente per le azioni secondarie. I [bordi a gradiente in CSS](https://gradiently.design/it/guide/css-gradient-border) trattano le versioni trasparenti e animate.

## Stati disattivato e di caricamento

Un pulsante a gradiente disattivato deve smettere di sembrare un invito. Togli del tutto il gradiente invece di abbassare solo l’opacità, che può lasciare un pulsante sbiadito ma ancora colorato che le persone cercano di premere. Un grigio piatto e a basso contrasto con `cursor: not-allowed` si legge chiaramente come non disponibile. Per il caricamento, mantieni il gradiente e sostituisci l’etichetta con uno spinner così il pulsante non cambia dimensione.

```css
.button:disabled {
  background-image: none;
  background-color: #e5e7eb;
  color: #6b7280;
  box-shadow: none;
  cursor: not-allowed;
}
```

Disattivato significa piatto. Il gradiente torna solo quando l’azione è disponibile.

## Ritocchi finali che sembrano di qualità

- **Un riflesso in alto.** `inset 0 1px 0 rgb(255 255 255 / 0.25)` suggerisce una fonte di luce dall’alto e dà alla superficie una leggera curvatura.
- **Un’ombra colorata.** Un’ombra nella tonalità del pulsante, invece che nera, lo fa brillare invece di farlo fluttuare.
- **Un solo angolo per tutto.** Usa lo stesso angolo di gradiente, come 110deg, su ogni controllo a gradiente.
- **Colori del brand, non preset.** La sfumatura deve venire dalla tua palette; il [branding con i gradienti](https://gradiently.design/it/guide/gradient-branding) spiega perché.
- **Un riflesso conico, con parsimonia.** Un debole livello conico può aggiungere un luccichio metallico; vedi i [gradienti conici in CSS](https://gradiently.design/it/guide/css-conic-gradient).

## FAQ

### Come creo un pulsante a gradiente in CSS?

Imposta `background-image: linear-gradient(110deg, #4f46e5, #9333ea)` sul pulsante, con testo bianco, angoli arrotondati e un `background-color` pieno di riserva.

### Come animo un pulsante a gradiente all’hover?

Rendi il gradiente il doppio più largo con `background-size: 200% 100%` e fai la transizione di `background-position`, oppure sfuma uno pseudo-elemento che contiene il gradiente dell’hover.

### Perché il mio pulsante a gradiente cambia all’istante all’hover?

I browser non possono fare transizioni tra due valori di `background-image`. Sposta o sfuma il gradiente invece di sostituirlo.

### Che colore di testo funziona su un pulsante a gradiente?

Quello che raggiunge almeno 4,5:1 di contrasto rispetto alla parte più chiara del gradiente. Il bianco funziona sui gradienti profondi; il testo scuro sta bene sui pastelli.

### Ogni pulsante deve usare un gradiente?

No. Usa un gradiente per la singola azione principale di una schermata e tieni i pulsanti secondari piatti o con solo il contorno, così quello importante risalta.