Guida HTML interattiva: Pulsante con link

Q: Come creo in HTML un pulsante che porta a un'altra pagina?

Usa un link e dagli lo stile di un pulsante: Sign up con del CSS per padding, sfondo, bordi arrotondati e text-decoration: none. Ha l'aspetto di un pulsante e si comporta da link, che è quello che è.

Q: Un button ha l'attributo href?

No. non ha href. Per mandare il browser a un URL usa , oppure metti il pulsante in un con un action (un attributo formaction sul pulsante lo sostituisce).

Q: Come disattivo un link che sembra un pulsante?

I link non hanno l'attributo disabled. Togli l'href così smette di essere un link, aggiungi aria-disabled="true" e dagli lo stile da disattivato. Rimetti l'href quando deve tornare a funzionare.

Come creare un pulsante che porta a una pagina

Scrivi un link normale, <a href>, e dagli con il CSS l'aspetto di un pulsante. Porta alla pagina come qualsiasi link e mantiene tutte le funzioni dei link: apri in una nuova scheda, copia indirizzo link e l'anteprima dell'URL al passaggio del mouse.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Button link</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 16px; }
    .btn {
      display: inline-block;
      padding: 10px 18px;
      border-radius: 8px;
      background: #2563eb;
      color: #fff;
      font-weight: 600;
      text-decoration: none;
    }
    .btn:hover { background: #1d4ed8; }
    .btn:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
  </style>
</head>
<body>
  <a class="btn" href="https://developer.mozilla.org/">Read the docs</a>
</body>
</html>

Le regole che trasformano un link in un pulsante:

display: inline-block fa sì che il padding allarghi il riquadro e lo tiene nella riga di testo.
text-decoration: none toglie la sottolineatura.
color e background sostituiscono il colore blu dei link.
:focus-visible dà a chi usa la tastiera un contorno di focus ben visibile.

La stessa classe funziona su un <button>, quindi il pulsante di invio di un form e un link a un'altra pagina possono avere lo stesso aspetto mentre ognuno fa il suo lavoro.

Pulsante o link: quale elemento usare

La domanda è cosa succede al clic, non che aspetto ha.

Cliccandolo	Usa	Esempi
Va a un altro URL	`<a href>`	Registrati, Leggi di più, Vedi i prezzi, Scarica
Cambia qualcosa in questa pagina	`<button type="button">`	Apri menu, Play, Aggiungi al carrello, Mostra password
Invia un form	`<button type="submit">`	Accedi, Cerca, Salva

Un link annunciato come "link" e un pulsante annunciato come "pulsante" dicono a chi usa un lettore di schermo cosa succederà. Anche il comportamento con la tastiera è diverso: Invio attiva entrambi, ma la barra spaziatrice attiva solo i pulsanti (su un link fa scorrere la pagina). L'elemento pulsante vero e proprio è spiegato in [button in HTML](/docs/html/button).

Perché non mettere un pulsante dentro un link

Questo è lo schema che quasi tutti provano per primo:

<!-- Invalid: interactive content inside <a> -->
<a href="/signup"><button>Sign up</button></a>

<!-- Invalid the other way round, too -->
<button><a href="/signup">Sign up</a></button>

Lo standard HTML li vieta entrambi: <a> e <button> non possono contenere elementi interattivi. In pratica la tastiera trova due fermate di Tab per un solo controllo, un lettore di schermo può annunciare "link, pulsante, Sign up", e se un clic segue il link dipende dal browser. Scegli un solo elemento.

Perché non usare onclick con location.href

L'altro trucco diffuso è un pulsante che imposta l'URL in JavaScript. Ha lo stesso aspetto di un link:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Link vs onclick</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 16px; }
    .btn {
      display: inline-block;
      padding: 10px 18px;
      border: 0;
      border-radius: 8px;
      background: #16a34a;
      color: #fff;
      font: inherit;
      text-decoration: none;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <a class="btn" href="https://example.com/">Real link</a>
  <button class="btn" type="button"
    onclick="window.open('https://example.com/')">Button with onclick</button>
  <p>Hover both, then right-click both.</p>
</body>
</html>

(L'esempio usa window.open perché l'anteprima non deve cambiare pagina; il codice abituale è location.href = '...'.) Passa il mouse sopra i due e cliccali con il tasto destro: solo il vero link mostra il suo URL e offre "Apri link in una nuova scheda" e "Copia indirizzo link". Il pulsante non ha nemmeno Ctrl+clic o clic centrale, il browser non lo segna come visitato e i motori di ricerca non lo seguono come link. Se la destinazione è un URL, scrivi <a href>.

Un pulsante di form che apre un URL

C'è un caso in cui un <button> che porta a un'altra pagina è giusto: quando invia dei dati insieme. Una casella di ricerca è l'esempio classico. L'action del form è l'URL e method="get" mette i campi nella query string:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Search form</title>
</head>
<body>
  <form action="https://duckduckgo.com/" method="get">
    <label>Search <input type="search" name="q" value="html button link" required></label>
    <button type="submit">Search</button>
    <button type="submit" formaction="https://www.bing.com/search">Search with Bing</button>
  </form>
</body>
</html>

Premi Search: in una pagina vera il browser andrebbe a https://duckduckgo.com/?q=html+button+link. L'anteprima invece mostra i dati senza uscire. formaction invia lo stesso form a un URL diverso dal secondo pulsante.

Pulsanti link disattivati

I link non hanno l'attributo disabled; <a disabled> non fa nulla. Per spegnere un pulsante link, togli il suo href (un <a> senza href non è un link e non si può cliccare né raggiungere con il focus), e segnalo con aria-disabled="true" così lo sanno sia lo stile sia i lettori di schermo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Disabled link button</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 16px; }
    .btn {
      display: inline-block;
      padding: 10px 18px;
      border-radius: 8px;
      background: #2563eb;
      color: #fff;
      text-decoration: none;
    }
    .btn[aria-disabled="true"] {
      background: #e5e7eb;
      color: #6b7280;
      cursor: not-allowed;
    }
  </style>
</head>
<body>
  <a class="btn" href="https://example.com/">Continue</a>
  <a class="btn" aria-disabled="true">Continue</a>
</body>
</html>

Premi Tab nell'anteprima: il focus arriva solo sul primo pulsante. Alcuni siti tengono l'href e aggiungono invece pointer-events: none, ma così si blocca solo il mouse. Il link resta raggiungibile con Tab e Invio lo segue ancora.

Pulsanti per nuova scheda e download

Tutti gli attributi dei link continuano a funzionare su un link con lo stile di un pulsante:

<a class="btn" href="/files/guide.pdf" download>Download the guide</a>
<a class="btn" href="https://github.com/" target="_blank" rel="noopener">GitHub</a>

Ecco un altro motivo per usare <a>: un <button> non ha né download né target. Trovi di più su target in aprire un link in una nuova scheda.

Errori comuni

Un pulsante dentro un link, o un link dentro un pulsante. HTML non valido con un comportamento imprevedibile.
<button onclick="location.href=..."> per una semplice navigazione. Niente nuova scheda, niente copia link, niente indicizzazione.
role="button" su un link che cambia pagina. Dice a chi usa un lettore di schermo che c'è un pulsante, e poi la pagina cambia. Lascialo un link.
Link con stile da pulsante per delle azioni come "Elimina" o "Apri menu" con href="#". Se non si carica niente, usa un <button type="button">.
<a disabled>. L'attributo non esiste sui link. Togli l'href.
Dimenticare display: inline-block, così il padding verticale si sovrappone alle righe sopra e sotto.

Domande frequenti

Come creo in HTML un pulsante che porta a un'altra pagina?

Usa un link e dagli lo stile di un pulsante: <a href="/signup" class="btn">Sign up</a> con del CSS per padding, sfondo, bordi arrotondati e text-decoration: none. Ha l'aspetto di un pulsante e si comporta da link, che è quello che è.

Posso mettere un button dentro un tag a?

No. Lo standard HTML non permette contenuti interattivi come <button> dentro <a>. I browser lo gestiscono in modi diversi, chi usa la tastiera trova due fermate di Tab per un solo controllo e i lettori di schermo lo annunciano in modo confuso. Usa un solo elemento.

Un button ha l'attributo href?

No. <button> non ha href. Per mandare il browser a un URL usa <a href>, oppure metti il pulsante in un <form> con un action (un attributo formaction sul pulsante lo sostituisce).

È sbagliato usare onclick con location.href su un pulsante?

Funziona, ma chi legge perde tutto quello che i link offrono: clic centrale e Ctrl+clic per una nuova scheda, Copia indirizzo link, l'anteprima dell'URL al passaggio del mouse, e i motori di ricerca non lo seguono come link. Usa un <a> quando la destinazione è un URL.

Come disattivo un link che sembra un pulsante?

I link non hanno l'attributo disabled. Togli l'href così smette di essere un link, aggiungi aria-disabled="true" e dagli lo stile da disattivato. Rimetti l'href quando deve tornare a funzionare.

Concetti correlati