risposta-alla-domanda-sullo-sviluppo-web-bd.com

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

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

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

Come posso raggiungere questo obiettivo?


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

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

ma il problema con questo è che in Safari e Internet Explorer , aggiunge un carattere 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 creare uno stile per disegnare un link come un pulsante.

Utilizzo di 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 andare su un'altra pagina. Quindi provare a fare un pulsante come un collegamento è la soluzione sbagliata. Il mio suggerimento è che dovresti usare un link e style it per apparire come un pulsante .

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

HTML

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

<form action="http://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 di <input type="submit"> nell'esempio sopra, puoi anche usare <button type="submit">. L'unica differenza è che l'elemento <button> consente ai bambini.

Ti aspetteresti intuitivamente di poter usare <button href="http://google.com"> analogo all'elemento <a>, ma sfortunatamente no, questo attributo non esiste secondo le specifiche HTML .

CSS

Se CSS è consentito, usa semplicemente un <a> che hai stile per apparire come un pulsante usando tra gli altri la proprietà appearance ( solo il supporto di Internet Explorer è attualmente (luglio 2015) ancora scarso ).

<a href="http://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 tante librerie CSS come Bootstrap .

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

JavaScript

Se è consentito JavaScript, imposta window.location.href.

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

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

475
Adam

Se si tratta dell'aspetto visivo di un pulsante che si sta cercando in un tag di ancoraggio HTML di base, è possibile utilizzare Twitter Bootstrap framework per formattare uno qualsiasi dei seguenti collegamenti/pulsanti di tipo HTML comuni da visualizzare come pulsante. Si prega di notare le differenze visive tra la versione 2, 3 o 4 della struttura:

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

Bootstrap (v4) aspetto del campione:

Sample output of Boostrap v4 buttons

Bootstrap (v3) aspetto del campione:

Sample output of Boostrap v3 buttons

Bootstrap (v2) aspetto del campione:

Sample output of Boostrap v2 buttons

421
Bern

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.

137
RedFilter

A partire da HTML5, i pulsanti supportano l'attributo formaction. Meglio di tutto, non sono necessari Javascript o trucchi.

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

Avvertimenti

  • Deve essere circondato da tag <form>.
  • Il tipo <button> deve essere "submit" (o non specificato), non ho potuto farlo funzionare con il tipo "pulsante". Che porta in alto il punto qui sotto.
  • Sovrascrive l'azione predefinita in un modulo. In altre parole, se lo fai all'interno di un altro modulo causerà un conflitto.

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

110
EternalHour

In realtà è molto semplice e senza utilizzare alcun elemento di forma. 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 usare target="_blank".

48
Lucian Minea

Se stai utilizzando un modulo interno, aggiungi 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>
36
saravanabawa
<form>
    <input TYPE="button" VALUE="Home Page"
        onclick="window.location.href='http://www.wherever.com'"> 
</form>
25
ghoppe

Puoi semplicemente inserire un tag attorno all'elemento:

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

https://jsfiddle.net/hj6gob8b/

22
Uriahs Victor

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 con questo è che in alcune versioni di browser popolari come Chrome, Safari e Internet Explorer, aggiunge un carattere punto interrogativo alla fine dell'URL. In altre parole, il codice sopra il tuo URL finirà per assomigliare a questo:

http://someserver/pages2?

C'è un modo per risolvere questo problema, ma richiederà la configurazione lato server. Un esempio con Apache Mod_rewrite sarebbe reindirizzare tutte le richieste con un ? finale al loro URL corrispondente senza ?. Ecco un esempio usando .htaccess, ma c'è una discussione completa here :

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

Configurazioni simili possono variare in base al server Web e allo stack utilizzati. Quindi una sintesi di questo approccio:

Professionisti:

  1. Questo è un pulsante reale e semanticamente ha senso.
  2. Poiché è un pulsante reale, agirà anche come un pulsante reale (ad esempio, comportamento trascinabile e/o simulare un clic quando si preme la barra spaziatrice quando è attivo).
  3. Nessun JavaScript, non è richiesto uno stile complesso.

Contro:

  1. In coda ? sembra brutto in alcuni browser. Questo può essere risolto da un hack (in alcuni casi) usando POST invece di GET, ma il modo pulito è di avere un reindirizzamento sul lato server. Lo svantaggio con il reindirizzamento lato server è che causerà una chiamata HTTP aggiuntiva per questi collegamenti a causa del reindirizzamento 304.
  2. Aggiunge ulteriore elemento <form>
  3. Il posizionamento degli elementi quando si utilizzano più forme può essere complicato e diventa ancora peggiore quando si tratta di progetti reattivi. Alcuni layout possono diventare impossibili da ottenere con questa soluzione a seconda dell'ordine degli elementi. Questo può finire per incidere sull'usabilità se il design è influenzato da questa sfida.

Soluzione 2: uso di JavaScript.

È possibile utilizzare JavaScript per attivare onclick e altri eventi per simulare il comportamento di un collegamento tramite un pulsante. L'esempio seguente 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 i requisiti di base) e mantenere la semantica pur non richiedendo una forma aggiuntiva.
  2. Poiché è un pulsante reale, agirà anche come un pulsante reale (ad esempio, comportamento trascinabile e/o simulare 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 di base (core) come un link.

Soluzione 3: Ancoraggio (collegamento) stilizzato come un pulsante.

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

Professionisti:

  1. Semplice (per i requisiti di base) e un buon supporto cross-browser.
  2. Non ha bisogno di un <form> per funzionare.
  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 # 1. Non supporterà lo stesso comportamento del pulsante. Ad esempio, i link reagiscono diversamente quando vengono trascinati. Anche il trigger del link "barra spaziatrice" non funzionerà senza qualche codice JavaScript aggiuntivo. Aggiungerà molta complessità poiché i browser non sono coerenti su come supportano gli eventi keypress sui pulsanti.

Conclusione

La soluzione n. 1 (Button in una forma) sembra la più trasparente per gli utenti con il minimo lavoro richiesto. Se il tuo layout non è influenzato da questa scelta e il lato server Tweak è fattibile, questa è una buona opzione per i casi in cui l'accessibilità è la massima priorità (ad esempio link su una pagina di errore o messaggi di errore).

Se JavaScript non rappresenta un ostacolo ai tuoi requisiti di accessibilità, la soluzione n. 2 (JavaScript) sarebbe preferibile tra il primo e il terzo.

Se per qualche motivo, l'accessibilità è di vitale importanza (JavaScript non è un'opzione) ma ci si trova in una situazione in cui il design e/o la configurazione del server impedisce all'utente di utilizzare l'opzione n. 1, quindi la soluzione n. 3 (Anchor in stile come pulsante) è una buona alternativa per risolvere questo problema con un impatto minimo sull'usabilità.

21

Ci sono degli svantaggi nel fare qualcosa di simile al seguente?

<a class='nostyle' href='http://www.google.com/'>
    <span class='button'>Schedule</span>
</a>

Dove a.nostyle è una classe che ha il tuo stile di collegamento (dove puoi eliminare lo stile di collegamento standard) e span.button è una classe che ha lo stile per il tuo "pulsante" (sfondo, bordo, sfumatura, ecc.).

18
MuffinTheMan

L'unico modo per farlo (eccetto l'ingegnosa idea di BalusC!) È aggiungendo un evento JavaScript onclick al pulsante, il che non va bene per l'accessibilità. 

Hai considerato lo stile di un normale link come un pulsante? Non è possibile ottenere pulsanti specifici del sistema operativo in questo modo, ma è ancora il modo migliore per eseguire l'IMO.

16
Pekka 웃

Andando d'accordo con quello che altri hanno aggiunto, si può scatenare semplicemente usando una semplice classe CSS senza PHP, senza jQuery code, semplicemente HTML e CSS.

Crea una classe CSS e aggiungila al tuo ancoraggio. 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>

È così. È molto facile da fare e ti consente di essere creativo come desideri. Tu controlli i colori, le dimensioni, le forme (raggio), ecc. Per maggiori dettagli, vedi il sito che ho trovato su .

15
artie

Perché non inserire semplicemente il tuo 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 nessun tag% 20 al link, proprio come lo vuoi tu. Ho usato un link a google per dimostrare.

Ovviamente potresti avvolgerlo in un tag form ma non è necessario.

Quando colleghi un altro file locale, inseriscilo nella stessa cartella e aggiungi il nome del file come riferimento. O specificare la posizione del file se in non è nella stessa cartella.

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

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

Se la mia struttura di progetto fosse ...

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

..pubblico
|||| ..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 secondary.html, l'URL sarebbe, 

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

Nessun carattere speciale incluso alla fine dell'URL Spero che questo aiuti . A proposito - (% 20 indica uno spazio in un URL codificato e inserito al loro posto).

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

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


Potrebbe sembrare che io stia affermando alcuni punti davvero basilari, ma voglio solo spiegare il meglio che posso. Grazie per la lettura e spero che questo aiuti qualcuno per lo meno. Buona programmazione.

15
C.Gadd

@ Nicolas, in seguito ha funzionato per me come il tuo non ha type="button" a causa del quale ha iniziato a comportarsi come tipo di invio ... visto che ho già un tipo submit.it non ha funzionato per me .... e ora puoi aggiungere class to button o <a> per ottenere il layout richiesto:

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

Se vuoi evitare di dover utilizzare un modulo o un input e stai cercando un link che sembra un pulsante, puoi creare link pulsanti di bell'aspetto con un wrapper div, un'ancora e un tag h1. Potresti volerlo in questo modo in modo da poter posizionare liberamente il pulsante di collegamento intorno alla tua pagina. Ciò è particolarmente utile per centrare orizzontalmente i pulsanti e avere un testo centrato verticalmente all'interno di essi. Ecco come:

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

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

Quindi in CSS, il tuo stile dovrebbe assomigliare così:

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

Ecco a jsFiddle per verificarlo e giocarci.

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

  1. Potresti semplicemente fare il display <a>: blocca, muovi e lo disegna come un pulsante, ma l'allineamento verticale del testo all'interno diventa difficile.

  2. Questo ti permette di visualizzare <a>: inline-table e <h1> display: table-cell, che ti permette di usare vertical-align: middle su <h1> e centrarlo verticalmente (che è sempre Nice on un bottone). Sì, puoi usare il padding, ma se vuoi che il tuo pulsante ridimensioni dinamicamente, non sarà così pulito.

  3. A volte quando incorpori un <a> all'interno di un div, solo il testo è cliccabile, questa configurazione rende cliccabile l'intero pulsante.

  4. Non devi occuparti di moduli se stai solo provando a spostarti su un'altra pagina. I moduli sono pensati per inserire informazioni e dovrebbero essere riservati per questo.

  5. Ti consente di separare in modo pulito lo stile dei pulsanti e lo stile del testo tra loro (vantaggio tratto? Certo, ma i CSS possono avere un aspetto sgradevole quindi è bello decomporlo).

Mi ha sicuramente reso la vita più semplice stilare un sito web mobile per schermi di dimensioni variabili.

13
MoMo

Un'altra opzione è creare un collegamento nel pulsante:

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

Quindi usa i CSS per modellare il link e il pulsante, in modo che il link occupi l'intero spazio all'interno del pulsante (quindi non c'è un clic sbagliato da parte dell'utente):

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

Ho creato una demo qui .

12
lukeocom

Se si desidera creare un pulsante utilizzato per un URL ovunque, creare una classe pulsante per un ancoraggio.

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;
}
8
Maarek

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

  1. Usa il metodo <form method="get"> con cui l'OP inizia. Funziona molto bene, ma a volte aggiunge un ? 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. Ricadrà senza problemi al metodo <form> per la piccolissima frazione di utenti che non hanno JavaScript abilitato.
  3. Il codice JavaScript utilizza la delega degli eventi in modo da poter allegare un listener di eventi prima che esista anche <form> o <button>. In questo esempio sto usando jQuery, perché è semplice e veloce, ma può essere fatto anche in JavaScript "Vanilla".
  4. Il codice JavaScript impedisce l'azione predefinita e quindi segue il collegamento fornito nell'attributo <form>action.

Esempio 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
pseudosavant

Per HTML 5 e pulsante con stile insieme a 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>

5
Anees Hameed

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. Usando HTML form
  7. Usando HTML anchor tag
<!-- 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>
3
Adnan Toky

Inoltre è possibile utilizzare un pulsante:

Ad esempio, in Sintassi di ASP.NET :

// 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>
3
Elnaz

L'ho usato per un sito web al quale sto lavorando e funziona benissimo !. Se vuoi un po 'di stile, metterò 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'">

Lavorando con JSFiddle qui .

2
Jasch1

Puoi usare javascript:

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

</html>

Sostituisci http://www.google.com con il tuo sito web, assicurati di includere http:// prima dell'URL.

1
Hayz

È anche possibile impostare i pulsanti type-property su "button" (non inviare il modulo) e quindi nidificarlo all'interno di un collegamento (lo rende reindirizzare l'utente).

In questo modo potresti avere un altro pulsante nello stesso modulo che invia il modulo, nel caso sia necessario. Penso anche che nella maggior parte dei casi sia preferibile impostare il metodo di form e l'azione come link (a meno che non si tratti di 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.

Fai attenzione ad assicurarti che il pulsante non attivi alcuna azione, in quanto ciò causerà un conflitto. Inoltre, come ha fatto notare Arius, dovresti essere consapevole del fatto che, per la ragione sopra riportata, questo non è considerato un HTML valido, secondo lo standard. Funziona comunque come previsto in Firefox e Chrome, ma non l'ho ancora testato per Internet Explorer.

1
Anders Martini

Le persone che hanno risposto utilizzando gli attributi <a></a> su un <button></button> è stato utile.

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

Il pulsante è ora considerato come/come pulsante di invio (HTML5). Ho provato a lavorare su un modo, e ho trovato questo metodo.

Crea un pulsante di 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 poi crea il tuo link con un tag class che prende il nome dallo stile CSS che hai creato:

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

Ecco un violino:

JS Fiddle

1
Logan Wayne

Se quello che ti serve è che assomigli ad un pulsante, con enfasi sull'immagine del gradiente , puoi farlo:

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

Se vuoi reindirizzare per 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') to document.location.href

** Non funzionerà se fai riferimento per gli URL fuori sede del tuo dominio a causa di "X-Frame-Options" su "sameorigin".

Codice di esempio:

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

In JavaScript

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

In HTML

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