Utilizzare bottoni in HTML come fossero link

Attraverso i tag HTML <button> e <input type="button"> viene creato un bottone o pulsante. Questi tag sono stati concepiti per essere usati all’interno di form oppure per essere collegati a specifiche azioni Javascript come, ad esempio, stampare una pagina o aprire una finestra.

Una delle domande frequenti di chi è alle prime armi con il web-publishing, tuttavia, è come utilizzare un bottone per creare un semplice link. La questione può apparire banale, ma in realtà non è così scontata come potrebbe apprire a prima vista. I bottoni HTML, infatti, non sono stati concepiti per essere dei link e non dispongono dell’attributo href (che è tipico dei link).

Creare un form per avere un link

La soluzione più semplice per utilizzare un bottone come fosse un link consiste nel creare un <form> specificando nell’attributo action la pagina di destinazione (che sarebbe, in pratica, l’equivalente dell’attributo href del tag <a>).

Vediamo il codice:

<form action="https://www.mrwebmaster.it">
  <button type="submit">
    Visita Mr. Webmaster
  </button>  
</form>

Alla pressione del bottone l’utente verrà redirezionato alla URL indicata come pagina di destinazione del modulo.

Se volessimo aprire il link in una nuova finestra non faremo altro che aggiungere l’attributo target al tag <form> in questo modo:

<form action="https://www.mrwebmaster.it" target="_blank">
  <button type="submit">
    Visita Mr. Webmaster
  </button>  
</form>

Trasformare un bottone in un link con un pizzico di Javascript

Alternativamente alla soluzione proposta sopra, qualora si abbia la necessità di trasformare un bottone in un link si potrà ricorrere a Javascript: in questo modo potremo far sì che alla pressione del bottone l’utente venga redirezionato ad un’altra pagina esattamente come accade quando si fa click su un classico collegamento ipertestuale.

Vediamo di seguito il codice:

<button onclick="location.href='https://www.mrwebmaster.it'">
  Visita Mr. Webmaster
</button>

Come potete notare abbiamo utilizzato l’attributo onclick valorizandolo con location.href seguito dalla URL di destinazione. Attraverso questa sintassi, in pratica, abbiamo ricreato l’effetto di un classico link all’interno di un bottone HTML senza doverci costruire intorno un form…

Se volessimo aprire la URL in una nuova finestra, invece, utilizzeremmo questo codice:

<button onclick="window.open('https://www.mrwebmaster.it');">
  Visita Mr. Webmaster
</button>

Utilizzare CSS per creare link con l’aspetto di un bottone

La soluzione migliore per utilizzare bottoni come semplici link, tuttavia, consiste nell’utilizzare i fogli di stile. Attraverso CSS, infatti, possiamo creare una classe condivisa tra i tag <a> e <button> attraverso la quale parificare (esteticamente) i due elemeti che risulteranno, pertanto, indistinguibili da un punto di vista grafico.

Vediamo un esempio di stilizzazione CSS per creare link e bottoni con lo stesso aspetto:

.btn {
  display: inline-block;
  padding: 3px 6px;
  background-color: #444;
  color: #FFF;
  border: 1px solid #222;
  border-radius: 3px;
  text-decoration: none;
  font-family: arial, verdana, sans-serif;
  font-size: 12px;
  cursor: pointer;
}

Questa classe andremo ad applicarla, come detto, tanto ai bottoni veri e propri quanto ai classici link (ovviamente solo quando desideriamo che assumano l’aspetto di un bottone).

E’ appena il caso di sottolineare come la stilizzazione proposta sia assolutamente arbitraria e può essere facilmente modificata secondo i propri gusti e le proprie esigenze stilistiche.