Creare un <button> questo è un collegamento in HTML

Fondamentalmente, mi piace il modo in cui lo <input type="submit"> è in stile, con il pulsante cliccabile quando aggiungi un piccolo CSS. Tuttavia, i pulsanti normali non hanno uno stile simile, non hanno tale clickabilità senza alcuni CSS o JS principali e devi usare le immagini.Creare un <button> questo è un collegamento in HTML

Ho effettuato l'invio di pulsanti in collegamenti, utilizzando l'azione modulo, ma questo mi richiede di creare un nuovo modulo per ogni pulsante. Come posso trovare un mezzo felice? L'utilizzo di più moduli sta causando problemi nel mio stile che non riesco a risolvere a meno che non trovi un altro modo per creare pulsanti che sono link in HTML, che hanno uno stile predefinito che li fa avere uno stato premuto (e non intendo impostazioni predefinite del browser).

Qualche idea?

fonte

2010-07-27 AKor

Sono disponibili tre opzioni:

link stile a guardare come i pulsanti che utilizzano i CSS.

Basta guardare i "tag" blu chiaro sotto la tua domanda.

È possibile, anche per dare loro un aspetto depresso quando si fa clic (utilizzando pseudo-classi come: attivo), senza alcuno script. Molti siti importanti, come Google, stanno iniziando a creare pulsanti dagli stili CSS in questi giorni comunque, da script o meno.
Inserire un elemento di forma> < separato attorno a ciascuno.

Come hai detto nella domanda. Facile e funzionerà sicuramente senza Javascript (o anche CSS). Ma aggiunge un piccolo codice in più che può sembrare disordinato.
Fare affidamento su Javascript.

Qual è quello che hai detto che non volevi fare.

fonte

2010-07-27 05:49:49 thomasrutter

Vuol fare separati

Dovresti usare i CSS per rimuovere la spaziatura. Installa Firebug e usa "Inspect Element" per scoprire da dove proviene la spaziatura esistente. – thomasrutter

<a href="#"><button>Link Text</button></a>

Avete chiesto un link che assomiglia a un pulsante, in modo da utilizzare un collegamento e un pulsante :-) Ciò manterrà predefinita pulsante del browser styling. Il pulsante da solo non fa nulla, ma facendo clic su di esso si attiva il suo link principale.

Demo:

<a href="http://stackoverflow.com"><button>Link Text</button></a>

fonte

2010-07-27 08:09:00 edeverett

Soluzione interessante che non ho mai pensato! Quindi immagino che il pulsante non catturi gli eventi click o non li faccia ribollire? – thomasrutter

Non che io sappia. Credo che un pulsante al di fuori di un modulo sia un elemento completamente neutro come qualsiasi altra cosa. – edeverett

Questo non funziona su IE –

-2

Il 3 modi più semplici IMHO sono

1: si crea un'immagine di un pulsante e mettere a href intorno ad esso. (Non è un buon modo, si perde flessibilità e fornirà un sacco di difficoltà e problemi.)

2 (La più facile) -> JQuery

<input type="submit" someattribute="http://yoururl/index.php"> 

    $('button[type=submit] .default').click(function(){ 
    window.location = $(this).attr("someattribute"); 
    return false; //otherwise it will send a button submit to the server 

    });

3 (anche facile, ma io preferisco quello precedente) :

<INPUT TYPE=BUTTON OnClick="somefunction("http://yoururl");return false" VALUE="somevalue"> 

$fn.somefunction= function(url) { 
    window.location = url; 
};

fonte

2010-07-27 08:17:13 Nealv

L'opzione immagine non avrà il comportamento di un normale pulsante del browser (espandibile in base al contenuto del testo, deprimente, ecc.) L'opzione Javascript è eccessiva e lascia un pulsante inutile nella pagina se JavaScript non viene caricato o è disattivato . – edeverett

se si conosce qualche css e il taglio del pulsante dell'immagine si allungherà e avrà il comportamento dei pulsanti del browser normak. – Nealv

Per i miei peccati ho fatto questo molto in passato, ma far fronte a cose come il ridimensionamento del testo e gli stili di pulsanti predefiniti del browser rendono lo stile di un collegamento come un pulsante falso un compromesso che richiede tempo. Può funzionare in circostanze limitate, ma non è qualcosa che consiglierei. – edeverett

Un po 'più semplice e sembra esattamente come il pulsante nel modulo.Basta usare l'input e avvolgere il tag di ancoraggio attorno ad esso.

<a href="#"><input type="button" value="Button Text"></a>

fonte

2012-07-06 22:11:04 Jared

utilizzare JavaScript:

<button onclick="window.location.href='/css_page.html'">CSS page</button>

È sempre possibile lo stile del tasto in anyaways css. Spero che abbia aiutato!

Buona fortuna!

fonte

2017-11-03 07:10:18 Freeranger

IMPORTANTE:<button> dovrebbe mai essere un discendente di <a>.

Prova <a href="http://stackoverflow.com"><button>Link Text</button></a> in qualsiasi validatore HTML come https://validator.w3.org e si otterrà un errore. Non ha davvero senso usare un pulsante se si è non utilizzando il pulsante. Basta dare uno stile allo <a> con css per assomigliare ad un pulsante. Se si sta utilizzando un framework come Bootstrap, si potrebbe applicare lo stile tasto (s) btn, btn-primary ecc

jsfiddle: button styled link

.btnStack { 
 
    font-family: Oswald; 
 
    background-color: orange; 
 
    color: white; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    padding: 6px 12px; 
 
    margin-bottom: 0; 
 
    font-size: 14px; 
 
    font-weight: normal; 
 
    line-height: 1.428571429; 
 
    text-align: center; 
 
    white-space: nowrap; 
 
    vertical-align: middle; 
 
    cursor: pointer; 
 
    border: 1px solid transparent; 
 
    border-radius: 4px; 
 
    -webkit-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    -o-user-select: none; 
 
    user-select: none; 
 
} 
 

 
a.btnStack:hover { 
 
    background-color: #000; 
 
}

<link href='https://fonts.googleapis.com/css?family=Oswald:400' rel='stylesheet' type='text/css'> 
 
<a href="http://stackoverflow.com" class="btnStack">stackoverflow.com</a>

fonte

2018-02-16 16:10:34

Creare un <button> questo è un collegamento in HTML

risposta

Problemi correlati