Pulsanti a gradiente in CSS che sembrano di qualità

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.

.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);
}

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.

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 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.

Altri dettagli su calcoli e soglie sono in contrasto dei colori e accessibilità, e la stessa regola vale per qualsiasi testo su uno sfondo a gradiente.

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.

.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;
}

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.

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.

.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;
}

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.

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

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 spiega perché.
• Un riflesso conico, con parsimonia. Un debole livello conico può aggiungere un luccichio metallico; vedi i gradienti conici in CSS.