Come creare un pulsante HTML che si comporta come un collegamento?

Vorrei creare un pulsante HTML che si comporta come un collegamento. Quindi, quando fai clic sul pulsante, reindirizza a una pagina. Vorrei che fosse il più accessibile possibile.

Mi piacerebbe anche che non ci siano caratteri extra o parametri nell'URL.

Come posso raggiungere questo obiettivo?

Sulla base delle risposte pubblicate finora, sto attualmente facendo questo:

<form method="get" action="/page2">
    <button type="submit">Continue</button>
</form>

ma il problema è che in Safari e Internet Explorer aggiunge un punto interrogativo alla fine dell'URL. Devo trovare una soluzione che non aggiunga caratteri alla fine dell'URL.

Ci sono altre due soluzioni per farlo: usare JavaScript o definire uno stile come un pulsante.

Utilizzando JavaScript:

<button onclick="window.location.href='/page2'">Continue</button>

Ma questo ovviamente richiede JavaScript, e per questo motivo è meno accessibile agli screen reader. Il punto di un collegamento è di passare a un'altra pagina. Quindi, cercare di far funzionare un pulsante come un collegamento è la soluzione sbagliata. Il mio suggerimento è che dovresti usare un link e disegnarlo come un pulsante .

<a href="/link/to/page2">Continue</a>

HTML

Il semplice modo HTML è quello di inserirlo in un punto in <form>cui si specifica l'URL di destinazione desiderato actionnell'attributo.

<form action="https://google.com">
    <input type="submit" value="Go to Google" />
</form>

Se necessario, imposta CSS display: inline;sul modulo per mantenerlo nel flusso con il testo circostante. Invece dell'esempio <input type="submit">sopra, puoi anche usare <button type="submit">. L'unica differenza è che l' <button>elemento consente ai bambini.

Ti aspetteresti intuitivamente di essere in grado di utilizzare <button href="https://google.com">analoghi con l' <a>elemento, ma sfortunatamente no, questo attributo non esiste in base alle specifiche HTML .

CSS

Se il CSS è permesso, usa semplicemente uno <a>stile che assomigli a un pulsante usando tra l'altro la appearanceproprietà ( non è supportata solo in Internet Explorer ).

<a href="https://google.com" class="button">Go to Google</a>

a.button {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    color: initial;
}

Oppure scegli una di quelle librerie CSS come Bootstrap .

<a href="https://google.com" class="btn btn-primary">Go to Google</a>

JavaScript

Se JavaScript è consentito, impostare il window.location.href.

<input type="button" onclick="location.href='https://google.com';" value="Go to Google" />

Invece dell'esempio <input type="button">sopra, puoi anche usare <button>. L'unica differenza è che l' <button>elemento consente ai bambini.

<button onclick="location.href='http://www.example.com'" type="button">
         www.example.com</button>

Si noti che l' type="button"attributo è importante, poiché il valore predefinito mancante è lo stato del pulsante Invia .

Se è l'aspetto visivo di un pulsante che stai cercando in un tag di ancoraggio HTML di base, puoi utilizzare il framework Twitter Bootstrap per formattare uno dei seguenti collegamenti / pulsanti HTML di tipo comune da visualizzare come pulsante. Notare le differenze visive tra la versione 2, 3 o 4 del framework:

<a class="btn" href="">Link</a>
<button class="btn" type="submit">Button</button>
<input class="btn" type="button" value="Input">
<input class="btn" type="submit" value="Submit">

Aspetto del campione Bootstrap (v4) :

Aspetto di esempio Bootstrap (v3) :

Aspetto del campione Bootstrap (v2) :

Uso:

<a href="http://www.stackoverflow.com/">
    <button>Click me</button>
</a>

Sfortunatamente, questo markup non è più valido in HTML5 e non convaliderà né funzionerà sempre come potenzialmente previsto. Usa un altro approccio.

A partire da HTML5, i pulsanti supportano l' formactionattributo. Soprattutto, non è necessario Javascript o inganno.

<form>
  <button formaction="http://stackoverflow.com">Go to Stack Overflow!</button>
</form>

Avvertenze

• Deve essere circondato da <form>tag.
• <button>il tipo deve essere "submit" (o non specificato), non sono riuscito a farlo funzionare con il pulsante "type". Il che porta in primo piano.
• Sostituisce l'azione predefinita in un modulo. In altre parole, se lo fai all'interno di un'altra forma causerà un conflitto.

Riferimento: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formaction Supporto browser: https://developer.mozilla.org/en-US/docs/Web/ HTML / Elemento / tasto # Browser_compatibility

In realtà è molto semplice e senza utilizzare alcun elemento del modulo. Puoi semplicemente usare il tag <a> con un pulsante all'interno :).

Come questo:

<a href="http://www.google.com" target="_parent"><button>Click me !</button></a>

E caricherà l'href nella stessa pagina. Vuoi una nuova pagina? Basta usaretarget="_blank" .

MODIFICARE

Un paio di anni dopo, mentre la mia soluzione funziona ancora, tieni presente che puoi usare molti CSS per farlo sembrare quello che vuoi. Questo era solo un modo veloce.

Se si utilizza un modulo interno, aggiungere l'attributo type = "reset" insieme all'elemento button. Impedirà l'azione del modulo.

<button type="reset" onclick="location.href='http://www.example.com'">
    www.example.com
</button>

<form>
    <input TYPE="button" VALUE="Home Page"
        onclick="window.location.href='http://www.wherever.com'"> 
</form>

Sembra che ci siano tre soluzioni a questo problema (tutte con pro e contro).

Soluzione 1: pulsante in un modulo.

<form method="get" action="/page2">
    <button type="submit">Continue</button>
</form>

Ma il problema è che in alcune versioni di browser popolari come Chrome, Safari e Internet Explorer, aggiunge un punto interrogativo alla fine dell'URL. Quindi, in altre parole, il codice sopra il tuo URL finirà così:

http://someserver/pages2?

C'è un modo per risolvere questo problema, ma richiederà una configurazione lato server. Un esempio che utilizza Apache Mod_rewrite potrebbe essere il reindirizzamento di tutte le richieste con un trailing ?al loro URL corrispondente senza il ?. Ecco un esempio di utilizzo .htaccess, ma c'è un filo completo qui :

RewriteCond %{THE_REQUEST} \?\ HTTP [NC]
RewriteRule ^/?(index\.cfm)? /? [R=301,L]

Configurazioni simili possono variare a seconda del server web e dello stack utilizzato. Quindi un riassunto di questo approccio:

Professionisti:

1. Questo è un vero pulsante e semanticamente ha senso.
2. Dal momento che è un pulsante reale, agirà anche come un pulsante reale (ad es. Comportamento trascinabile e / o imitare un clic quando si preme la barra spaziatrice quando è attivo).
3. Nessun JavaScript, nessuno stile complesso richiesto.

Contro:

1. trailing ? sembra brutto in alcuni browser. Questo può essere risolto da un hack (in alcuni casi) usando POST invece di GET, ma il modo più pulito è avere un reindirizzamento sul lato server. L'aspetto negativo del reindirizzamento lato server è che causerà una chiamata HTTP aggiuntiva per questi collegamenti a causa del reindirizzamento 304.
2. Aggiunge ulteriore <form>elemento
3. Il posizionamento degli elementi quando si utilizzano più moduli può essere difficile e peggiorare quando si affrontano progetti reattivi. Alcuni layout possono diventare impossibili da ottenere con questa soluzione a seconda dell'ordine degli elementi. Ciò può avere conseguenze sull'usabilità se il design è interessato da questa sfida.

Soluzione 2: utilizzo di JavaScript.

È possibile utilizzare JavaScript per attivare onclick e altri eventi per imitare il comportamento di un collegamento mediante un pulsante. L'esempio che segue potrebbe essere migliorato e rimosso dall'HTML, ma è lì semplicemente per illustrare l'idea:

<button onclick="window.location.href='/page2'">Continue</button>

Professionisti:

1. Semplice (per requisiti di base) e mantenere semantico senza richiedere un modulo aggiuntivo.
2. Dal momento che è un pulsante reale, agirà anche come un pulsante reale (ad es. Comportamento trascinabile e / o imitare un clic quando si preme la barra spaziatrice quando è attivo).

Contro:

1. Richiede JavaScript che significa meno accessibile. Questo non è l'ideale per un elemento base (core) come un collegamento.

Soluzione 3: ancoraggio (collegamento) a forma di pulsante.

Lo stile di un collegamento come un pulsante è relativamente semplice e può fornire un'esperienza simile su diversi browser. Bootstrap lo fa, ma è anche facile da realizzare usando stili semplici.

Professionisti:

1. Semplice (per requisiti di base) e buon supporto cross-browser.
2. Non ha bisogno di un <form>lavoro.
3. Non ha bisogno di JavaScript per funzionare.

Contro:

1. Semantic è un po 'rotto, perché vuoi un pulsante che si comporta come un link e non un link che si comporta come un pulsante.
2. Non riprodurrà tutti i comportamenti della soluzione n. 1. Non supporterà lo stesso comportamento del pulsante. Ad esempio, i collegamenti reagiscono in modo diverso quando trascinati. Anche l'attivatore di link "barra spaziatrice" non funzionerà senza un codice JavaScript aggiuntivo. Aggiungerà molta complessità poiché i browser non sono coerenti su come supportano gli keypresseventi sui pulsanti.

Conclusione

Soluzione n. 1 ( pulsante in un modulo ) sembra la più trasparente per gli utenti con un lavoro minimo richiesto. Se il layout non è influenzato da questa scelta e la modifica lato server è fattibile, questa è una buona opzione per i casi in cui l'accessibilità è la priorità (ad esempio collegamenti su una pagina di errore o messaggi di errore).

Se JavaScript non è un ostacolo ai requisiti di accessibilità, la soluzione n. 2 ( JavaScript ) sarebbe preferita rispetto a n. 1 e n. 3.

Se per qualche motivo, l'accessibilità è vitale (JavaScript non è un'opzione) ma ti trovi in ​​una situazione in cui il tuo design e / o la configurazione del tuo server ti impediscono di utilizzare l'opzione # 1, quindi la soluzione # 3 ( Anchor in stile come un pulsante ) è una buona alternativa per risolvere questo problema con un impatto minimo sull'usabilità.

Perché non posizionare semplicemente il pulsante all'interno di un tag di riferimento, ad es

<a href="https://www.google.com/"><button>Next</button></a>

Questo sembra funzionare perfettamente per me e non aggiunge alcun tag% 20 al link, proprio come lo desideri. Ho usato un collegamento a Google per dimostrare.

Ovviamente potresti racchiuderlo in un tag del modulo ma non è necessario.

Quando si collega un altro file locale, inserirlo nella stessa cartella e aggiungere il nome del file come riferimento. Oppure specifica il percorso del file se in non si trova nella stessa cartella.

<a href="myOtherFile"><button>Next</button></a>

Questo non aggiunge alcun carattere alla fine dell'URL, tuttavia ha il percorso del progetto dei file come url prima di terminare con il nome del file. per esempio

Se la struttura del mio progetto fosse ...

.. indica una cartella - indica un file mentre quattro | denota una sottodirectory o un file nella cartella principale

..public
|||| ..html
|||| |||| -main.html
|||| |||| -secondary.html

Se apro main.html l'URL sarebbe,

http://localhost:0000/public/html/main.html?_ijt=i7ms4v9oa7blahblahblah

Tuttavia, quando ho fatto clic sul pulsante all'interno di main.html per passare a secondario.html, l'URL sarebbe,

http://localhost:0000/public/html/secondary.html 

Nessun carattere speciale incluso alla fine dell'URL. Spero che questo possa essere d'aiuto. A proposito - (% 20 indica uno spazio in un URL codificato e inserito al posto di essi).

Nota: localhost: 0000 ovviamente non sarà 0000, avrai il tuo numero di porta lì.

Inoltre? _Ijt = xxxxxxxxxxxxxx alla fine dell'URL main.html, x è determinato dalla tua connessione, quindi ovviamente non sarà uguale al mio.

Potrebbe sembrare che sto affermando alcuni punti davvero basilari, ma voglio solo spiegare il meglio che posso. Grazie per aver letto e spero che questo aiuti qualcuno almeno. Buona programmazione.

Puoi semplicemente mettere un tag attorno all'elemento:

<a href="http://google.com" target="_blank">
<button>My Button</button>
</a>

https://jsfiddle.net/hj6gob8b/

L'unico modo per farlo (ad eccezione dell'ingegnosa idea del modulo di BalusC!) È aggiungendo un onclickevento JavaScript al pulsante, il che non è buono per l'accessibilità.

Hai mai considerato lo stile di un normale link come un pulsante? Non è possibile ottenere pulsanti specifici del SO in quel modo, ma è ancora il modo migliore IMO.

Accanto a ciò che alcuni altri hanno aggiunto, puoi scatenarti semplicemente usando una semplice classe CSS senza PHP, senza codice jQuery , solo semplici HTML e CSS.

Crea una classe CSS e aggiungila alla tua ancora. Il codice è sotto.

.button-link {
    height:60px;
    padding: 10px 15px;
    background: #4479BA;
    color: #FFF;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: solid 1px #20538D;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
}
.button-link:hover {
    background: #356094;
    border: solid 1px #2A4E77;
    text-decoration: none;
}

<HTML>
    <a class="button-link" href="http://www.go-some-where.com"
       target="_blank">Press Here to Go</a>

Questo è tutto. È molto facile da fare e ti consente di essere creativo come desideri. Controlli i colori, le dimensioni, le forme (raggio), ecc. Per maggiori dettagli, vedi il sito in cui l'ho trovato .

Se vuoi evitare di dover utilizzare un modulo o un input e stai cercando un link dall'aspetto pulsante, puoi creare link pulsanti dall'aspetto accattivante con un wrapper div, un'ancora e un h1tag. Potresti desiderarlo in modo da poter posizionare liberamente il pulsante di collegamento attorno alla tua pagina. Ciò è particolarmente utile per centrare orizzontalmente i pulsanti e avere testo centrato verticalmente al loro interno. Ecco come:

Il tuo pulsante sarà composto da tre pezzi nidificati: un wrapper div, un'ancora e un h1, in questo modo:

.link-button-wrapper {
    width: 200px;
    height: 40px;
    box-shadow: inset 0px 1px 0px 0px #ffffff;
    border-radius: 4px;
    background-color: #097BC0;
    box-shadow: 0px 2px 4px gray;
    display: block;
    border:1px solid #094BC0;
}
.link-button-wrapper > a {
    display: inline-table;
    cursor: pointer;
    text-decoration: none;
    height: 100%;
    width:100%;
}
.link-button-wrapper > a > h1 {
    margin: 0 auto;
    display: table-cell;
    vertical-align: middle;
    color: #f7f8f8;
    font-size: 18px;
    font-family: cabinregular;
    text-align: center;
}

<div class="link-button-wrapper">
    <a href="your/link/here">
        <h1>Button!</h1>
    </a>
</div>

Ecco un jsFiddle per e giocarci.

Vantaggi di questa configurazione: 1. Visualizzazione del div wrapper: il blocco semplifica il centraggio (usando il margine: 0 auto) e la posizione (mentre un <a> è in linea e più difficile da posizionare e non è possibile centrare).

2. Potresti semplicemente fare <a> visualizzare: bloccare, spostarlo e modellarlo come un pulsante, ma l'allineamento verticale del testo al suo interno diventa difficile.

3. Ciò consente di creare <a> display: inline-table e <h1> display: table-cell, che consente di utilizzare vertical-align: middle su <h1> e centrarlo verticalmente (che è sempre utile su un bottone). Sì, potresti usare l'imbottitura, ma se vuoi che il tuo pulsante si ridimensioni in modo dinamico, non sarà così pulito.

4. A volte, quando si incorpora un <a> in un div, è possibile fare clic solo sul testo, questa impostazione rende l'intero pulsante selezionabile.

5. Non devi avere a che fare con i moduli se stai solo cercando di passare a un'altra pagina. I moduli hanno lo scopo di inserire informazioni e dovrebbero essere riservati per questo.

6. Ti consente di separare in modo pulito lo stile del pulsante e lo stile del testo l'uno dall'altro (vantaggio tratto? Certo, ma i CSS possono avere un aspetto sgradevole, quindi è bello scomporlo).

Mi ha decisamente semplificato la vita disegnando un sito Web mobile per schermi di dimensioni variabili.

@ Nicolas, seguire per me ha funzionato perché il tuo non ha avuto a type="button"causa del quale ha iniziato a comportarsi come tipo di invio .. poiché ho già un tipo di invio.it non ha funzionato per me .... e ora puoi aggiungere una classe al pulsante o <a>per ottenere il layout richiesto:

<a href="http://www.google.com/">
    <button type="button">Click here</button>
</a>

Un'altra opzione è quella di creare un collegamento nel pulsante:

<button type="button"><a href="yourlink.com">Link link</a></button>

Quindi utilizza CSS per definire lo stile del link e del pulsante, in modo che il link occupi l'intero spazio all'interno del pulsante (in modo che non ci siano miss-click da parte dell'utente):

button, button a{position:relative;}
button a{top:0;left:0;bottom:0;right:0;}

Ho creato una demo qui .

Se si desidera creare un pulsante utilizzato per un URL ovunque, creare una classe di pulsanti per un'ancora.

a.button {
    background-color: #999999;
    color: #FFFFFF !important;
    cursor: pointer;
    display: inline-block;
    font-weight: bold;
    padding: 5px 8px;
    text-align: center;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
.button:hover {
    text-decoration: none;
}

So che sono state inviate molte risposte, ma nessuna di queste sembra aver risolto il problema. Ecco la mia opinione su una soluzione:

1. Utilizzare il <form method="get">metodo con cui inizia l'OP. Funziona davvero bene, ma a volte aggiunge un ?URL all'URL. Il? è il problema principale.
2. Utilizzare jQuery / JavaScript per eseguire il collegamento seguente quando JavaScript è abilitato in modo che ?non venga aggiunto all'URL. Si riporterà senza problemi al <form>metodo per la piccolissima frazione di utenti che non hanno JavaScript abilitato.
3. Il codice JavaScript utilizza delegazione evento in modo da poter collegare un listener di eventi prima che la <form>o <button>anche non esistere. Sto usando jQuery in questo esempio, perché è semplice e veloce, ma può essere fatto anche in JavaScript "vanilla".
4. Il codice JavaScript impedisce che si verifichi l'azione predefinita e quindi segue il collegamento indicato <form> actionnell'attributo.

Esempio di JSBin (lo snippet di codice non può seguire i collegamenti)

// Listen for any clicks on an element in the document with the `link` class
$(document).on('click', '.link', function(e) {
    // Prevent the default action (e.g. submit the form)
    e.preventDefault();

    // Get the URL specified in the form
    var url = e.target.parentElement.action;
    window.location = url;
});

<!DOCTYPE html>
<html>

    <head>
        <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
        <meta charset="utf-8">
        <title>Form buttons as links</title>
    </head>

    <body>
        <!-- Set `action` to the URL you want the button to go to -->
        <form method="get" action="http://stackoverflow.com/questions/2906582/how-to-create-an-html-button-that-acts-like-a-link">
            <!-- Add the class `link` to the button for the event listener -->
            <button type="submit" class="link">Link</button>
        </form>
    </body>

</html>

7 modi per farlo:

1. utilizzando window.location.href = 'URL'
2. utilizzando window.location.replace('URL')
3. utilizzando window.location = 'URL'
4. utilizzando window.open('URL')
5. utilizzando window.location.assign('URL')
6. Utilizzando il modulo HTML
7. Utilizzo del tag anchor HTML

<!-- Using window.location.href = 'URL' -->
<button onclick='window.location.href = "https://stackoverflow.com"'>
  Click Me
</button>

<!-- Using window.location.replace('URL') -->
<button onclick='window.location.replace("https://stackoverflow.com")'>
  Click Me
</button>

<!-- Using window.location = 'URL' -->
<button onclick='window.location = "https://stackoverflow.com"'>
  Click Me
</button>

<!-- Using window.open('URL') -->
<button onclick='window.open("https://stackoverflow.com","_self","","")'>
  Click Me
</button>

<!-- Using window.location.assign('URL') -->
<button onclick='window.location.assign("http://www.stackoverflow.com")'>
  Click Me
</button>

<!-- Using HTML form -->
<form action='https://stackoverflow.com' method='get'>
  <input type='submit' value='Click Me'/>
</form>

<!-- Using HTML anchor tag -->
<a href='https://stackoverflow.com'>
  <button>Click Me</button>
</a>

Per HTML 5 e pulsante con stile insieme allo sfondo dell'immagine

<a id="Navigate" href="http://www.google.com">
  <input 
    type="button"
    id="NavigateButton"
    style="
      background-image: url(http://cdn3.blogsdna.com/wp-content/uploads/2010/03/Windows-Phone-7-Series-Icons-Pack.png);
      background-repeat: no-repeat;
      background-position: -272px -112px;
      cursor:pointer;
      height: 40px;
      width: 40px;
      border-radius: 26px;
      border-style: solid;
      border-color:#000;
      border-width: 3px;" title="Navigate"
    />
</a>

Inoltre puoi usare un pulsante:

Ad esempio, nella sintassi di ASP.NET Core :

// Some other tags
 <form method="post">
      <input asp-for="YourModelPropertyOrYourMethodInputName"
      value="@TheValue" type="hidden" />
      <button type="submit" class="link-button" formaction="/TheDestinationController/TheDestinationActionMethod">
      @(TextValue)
      </button>
  </form>
// Other tags...


<style>
       .link-button {
        background: none !important;
        border: none;
        padding: 0 !important;
        color: #20a8d8;
        cursor: pointer;
    }
</style>

se si utilizza il certificato SSL

<a href="https://www.google.com" target="_blank"><button>Click me !</button></a>

Persone che hanno risposto utilizzando gli <a></a>attributi su a<button></button> state utili.

MA di recente, ho riscontrato un problema quando ho usato un link all'interno di a <form></form>.

Il pulsante è ora considerato come / come pulsante di invio (HTML5). Ho provato a aggirare il problema e ho trovato questo metodo.

Crea un pulsante in stile CSS come quello qui sotto:

.btn-style{
    border : solid 1px #0088cc;
    border-radius : 6px;
    moz-border-radius : 6px;
    -webkit-box-shadow : 0px 0px 2px rgba(0,0,0,1.0);
    -moz-box-shadow : 0px 0px 2px rgba(0,0,0,1.0);
    box-shadow : 0px 0px 2px rgba(0,0,0,1.0);
    font-size : 18px;
    color : #696869;
    padding : 1px 17px;
    background : #eeeeee;
    background : -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(49%,#eeeeee), color-stop(72%,#cccccc), color-stop(100%,#eeeeee));
    background : -moz-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
    background : -webkit-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
    background : -o-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
    background : -ms-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
    background : linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
    filter : progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#eeeeee',GradientType=0 );

}

Oppure creane uno nuovo qui: Generatore di pulsanti CSS

E quindi crea il tuo link con un tag di classe che prende il nome dallo stile CSS che hai creato:

<a href='link.php' class='btn-style'>Link</a>

Ecco un violino:

JS Fiddle

L'ho usato per un sito Web su cui sto attualmente lavorando e funziona benissimo !. Se vuoi anche uno stile accattivante, metto qui il CSS.

input[type="submit"] {
  background-color: white;
  width: 200px;
  border: 3px solid #c9c9c9;
  font-size: 24pt;
  margin: 5px;
  color: #969696;
}

input[type="submit"]:hover {
  color: white;
  background-color: #969696;
  transition: color 0.2s 0.05s ease;
  transition: background-color 0.2s 0.05s ease;
  cursor: pointer;
}

<input type="submit" name="submit" onClick="window.location= 'http://example.com'">

Lavora JSFiddle qui .

È inoltre possibile impostare i pulsanti type-propertysu "button" (impedisce di inviare il modulo), quindi annidarlo all'interno di un collegamento (consente di reindirizzare l'utente).

In questo modo potresti avere un altro pulsante nello stesso modulo che invia il modulo, nel caso fosse necessario. Penso anche che questo sia preferibile nella maggior parte dei casi rispetto all'impostazione del metodo del modulo e dell'azione come collegamento (a meno che non sia un modulo di ricerca immagino ...)

Esempio:

<form method="POST" action="/SomePath">
  <input type="text" name="somefield" />
  <a href="www.target.com"><button type="button">Go to Target!</button></a>
  <button type="submit">submit form</button>
</form>

In questo modo il primo pulsante reindirizza l'utente, mentre il secondo invia il modulo.

Fare attenzione a assicurarsi che il pulsante non attivi alcuna azione, poiché ciò provocherà un conflitto. Inoltre, come ha sottolineato Arius, dovresti essere consapevole del fatto che, per la ragione di cui sopra, questo non è strettamente considerato un HTML valido, secondo lo standard. Funziona comunque come previsto in Firefox e Chrome, ma non l'ho ancora testato per Internet Explorer.

Puoi usare JavaScript:

<html>
<button onclick='window.location = "http://www.google.com"'>
            Google
        </button>

</html>

Sostituisci http://www.google.comcon il tuo sito Web, assicurati di includere http://prima dell'URL.

In JavaScript

setLocation(base: string) {
  window.location.href = base;
}

In HTML

<button onclick="setLocation('/<whatever>')>GO</button>"

Digita window.locatione premi enternella tua console del browser. Quindi puoi avere un'idea chiara di ciò che locationcontiene

   hash: ""
   host: "stackoverflow.com"
   hostname: "stackoverflow.com"
   href: "/programming/2906582/how-to-create-an-html-button- 
   that-acts-like-a-link"
   origin: "https://stackoverflow.com"
   pathname: "/questions/2906582/how-to-create-an-html-button-that-acts-like-a-link"
   port: ""
   protocol: "https:"

Puoi impostare qualsiasi valore da qui.

Quindi, per reindirizzare un'altra pagina, puoi impostare il hrefvalore con il tuo link.

   window.location.href = your link

Nel tuo caso-

   <button onclick="window.location.href='www.google.com'">Google</button>

Se quello che ti serve è che sembrerà un pulsante, con enfasi sull'immagine sfumata , puoi farlo:

<a href="www.yourlink.com" class="btn btn-gradient"><i class="fa fa-home"> Button Text</i></a>

Se vuoi reindirizzare le pagine che risiedono nel tuo sito web, allora ecco il mio metodo: ho aggiunto l'attributo href al pulsante e onclick assegnato this.getAttribute ('href') a document.location.href

** Non funzionerà se fai riferimento a URL esterni al tuo dominio a causa di "X-Frame-Options" su "sameorigin".

Codice di esempio:

<button onclick="document.location.href=this.getAttribute('href');" href="/">Home</button>