Cara menggunakan button html

Saya ingin membuat tombol HTML yang berfungsi seperti tautan. Jadi, ketika Anda mengklik tombol, itu dialihkan ke halaman. Saya ingin diakses semaksimal mungkin.

Saya juga ingin jadi tidak ada karakter tambahan, atau parameter di URL.

Bagaimana saya bisa mencapai ini?

Berdasarkan jawaban yang diposting sejauh ini, saya saat ini melakukan ini:

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

tetapi masalah dengan ini adalah bahwa di Safari dan Internet Explorer , itu menambahkan karakter tanda tanya di akhir URL. Saya perlu menemukan solusi yang tidak menambahkan karakter ke bagian akhir URL.

Ada dua solusi lain untuk melakukan ini: Menggunakan JavaScript atau menata tautan agar terlihat seperti tombol.

Menggunakan JavaScript:

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

Tapi ini jelas membutuhkan JavaScript, dan karena itu kurang dapat diakses oleh pembaca layar. Titik tautan adalah pergi ke halaman lain. Jadi mencoba membuat tombol bertindak seperti tautan adalah solusi yang salah. Saran saya adalah Anda harus menggunakan tautan dan memberinya gaya agar terlihat seperti tombol .

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

HTML

Cara HTML biasa adalah dengan meletakkannya di <form> di mana Anda menentukan URL target yang diinginkan dalam atribut action.

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

Jika perlu, atur CSS display: inline; pada formulir untuk tetap mengikuti aliran teks di sekitarnya. Alih-alih <input type="submit"> dalam contoh di atas, Anda juga dapat menggunakan <button type="submit">. Satu-satunya perbedaan adalah bahwa elemen <button> memungkinkan anak-anak.

Secara intuitif Anda berharap dapat menggunakan <button href="http://google.com"> analog dengan elemen <a>, tetapi sayangnya tidak, atribut ini tidak ada sesuai dengan spesifikasi HTML .

CSS

Jika CSS dibolehkan, cukup gunakan <a> yang Anda gaya agar terlihat seperti tombol dengan menggunakan antara lain properti appearance ( hanya dukungan Internet Explorer saat ini (Juli 2015) masih buruk ).

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

Atau pilih salah satu dari banyak pustaka CSS seperti Bootstrap .

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

JavaScript

Jika JavaScript diizinkan, atur window.location.href.

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

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

Jika itu adalah tampilan visual dari tombol yang Anda cari dalam tag anchor HTML dasar maka Anda dapat menggunakan kerangka Twitter Bootstrap untuk memformat tautan/tombol ketik HTML berikut yang mana saja untuk muncul sebagai tombol. Harap perhatikan perbedaan visual antara versi 2, 3 atau 4 kerangka kerja:

<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) contoh tampilan:

Bootstrap (v3) contoh tampilan:

Bootstrap (v2) contoh tampilan:

Menggunakan:

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

Sayangnya, markup ini tidak lagi valid dalam HTML5 dan tidak akan memvalidasi atau selalu berfungsi seperti yang diharapkan. Gunakan pendekatan lain.

Ini sebenarnya sangat sederhana dan tanpa menggunakan elemen bentuk apa pun. Anda bisa menggunakan tag <a> dengan tombol di dalamnya :).

Seperti ini:

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

Dan itu akan memuat href ke halaman yang sama. Ingin halaman baru? Cukup gunakan target="_blank".

Jika Anda menggunakan formulir di dalam, tambahkan atribut type = "reset" bersama dengan elemen tombol. Ini akan mencegah tindakan form.

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

Tampaknya ada tiga solusi untuk masalah ini (semua dengan pro dan kontra).

Solusi 1: Tombol dalam formulir.

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

Tetapi masalah dengan ini adalah bahwa dalam beberapa versi browser populer seperti Chrome, Safari dan Internet Explorer, itu menambahkan karakter tanda tanya di bagian akhir URL. Jadi dengan kata lain untuk kode di atas, URL Anda akan terlihat seperti ini:

http://someserver/pages2?

Ada satu cara untuk memperbaikinya, tetapi akan membutuhkan konfigurasi sisi server. Salah satu contoh menggunakan Apache Mod_rewrite adalah untuk mengarahkan ulang semua permintaan dengan ? tambahan ke URL yang sesuai tanpa ?. Berikut ini adalah contoh menggunakan .htaccess, tetapi ada utas lengkap di sini :

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

Konfigurasi serupa dapat bervariasi tergantung pada server web dan tumpukan yang digunakan. Jadi ringkasan dari pendekatan ini:

Pro:

1. Ini adalah tombol nyata, dan secara semantis masuk akal.
2. Karena ini adalah tombol nyata, tombol ini juga akan bertindak seperti tombol nyata (mis. Perilaku yang dapat diseret dan/atau meniru klik saat menekan spasi saat aktif).
3. Tidak ada JavaScript, tidak perlu gaya rumit.

Kekurangan:

1. Trailing ? terlihat jelek di beberapa browser. Ini dapat diperbaiki dengan retas (dalam beberapa kasus) menggunakan POST alih-alih GET, tetapi cara bersihnya adalah dengan mengarahkan ulang sisi server. Kelemahan dari pengalihan sisi server adalah akan menyebabkan panggilan HTTP tambahan untuk tautan ini karena 304 pengalihan.
2. Menambahkan elemen <form> ekstra
3. Penempatan elemen ketika menggunakan berbagai bentuk bisa rumit dan menjadi lebih buruk ketika berhadapan dengan desain responsif. Beberapa tata letak bisa menjadi mustahil untuk dicapai dengan solusi ini tergantung pada urutan elemen. Ini akhirnya dapat memengaruhi kegunaan jika desain dipengaruhi oleh tantangan ini.

Solusi 2: Menggunakan JavaScript.

Anda dapat menggunakan JavaScript untuk memicu onclick dan acara lainnya untuk meniru perilaku tautan menggunakan tombol. Contoh di bawah ini dapat ditingkatkan dan dihapus dari HTML, tetapi hanya ada untuk menggambarkan ide:

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

Pro:

1. Sederhana (untuk kebutuhan dasar) dan tetap semantik tanpa memerlukan formulir tambahan.
2. Karena ini adalah tombol nyata, tombol ini juga akan bertindak seperti tombol nyata (mis. Perilaku yang dapat diseret dan/atau meniru klik saat menekan spasi saat aktif).

Kekurangan:

1. Membutuhkan JavaScript yang berarti lebih sedikit diakses. Ini tidak ideal untuk elemen basis (inti) seperti tautan.

Solusi 3: Jangkar (tautan) ditata seperti tombol.

Mendesain tautan seperti tombol relatif mudah dan dapat memberikan pengalaman serupa di berbagai peramban. Bootstrap melakukan ini, tetapi juga mudah untuk dicapai sendiri menggunakan gaya sederhana.

Pro:

1. Sederhana (untuk kebutuhan dasar) dan dukungan lintas-browser yang bagus.
2. Tidak perlu <form> untuk bekerja.
3. Tidak perlu JavaScript untuk berfungsi.

Kekurangan:

1. Semantik agak rusak, karena Anda menginginkan tombol yang bertindak seperti tautan dan bukan tautan yang bertindak seperti tombol.
2. Itu tidak akan mereproduksi semua perilaku solusi # 1. Itu tidak akan mendukung perilaku yang sama seperti tombol. Misalnya, tautan bereaksi berbeda saat diseret. Juga pemicu tautan "space bar" tidak akan berfungsi tanpa beberapa kode JavaScript tambahan. Ini akan menambah banyak kompleksitas karena browser tidak konsisten pada bagaimana mereka mendukung acara keypress pada tombol.

Kesimpulan

Solusi # 1 (Tombol dalam bentuk) sepertinya yang paling transparan untuk pengguna dengan pekerjaan minimal yang diperlukan. Jika tata letak Anda tidak terpengaruh oleh pilihan ini dan sisi server Tweak layak, ini adalah opsi yang baik untuk kasus-kasus di mana aksesibilitas adalah prioritas utama (mis. Tautan pada halaman kesalahan atau pesan kesalahan).

Jika JavaScript bukan halangan untuk persyaratan aksesibilitas Anda, maka solusi # 2 (JavaScript) akan lebih disukai daripada # 1 dan # 3.

Jika karena alasan tertentu, aksesibilitas sangat penting (JavaScript bukan opsi) tetapi Anda berada dalam situasi di mana desain dan/atau konfigurasi server Anda mencegah Anda menggunakan opsi # 1, maka solusi # 3 (Jangkar bergaya seperti tombol) adalah alternatif yang baik untuk menyelesaikan masalah ini dengan dampak kegunaan yang minimal.

Apakah ada kerugian untuk melakukan sesuatu seperti yang berikut ini?

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

Di mana a.nostyle adalah kelas yang memiliki gaya tautan Anda (di mana Anda dapat menyingkirkan gaya tautan standar) dan span.button adalah kelas yang memiliki gaya untuk "tombol" Anda (latar belakang, batas, gradien, dll.).

Satu-satunya cara untuk melakukan ini (kecuali untuk ide bentuk cerdik BalusC!) Adalah dengan menambahkan JavaScript onclick acara ke tombol, yang tidak baik untuk aksesibilitas. 

Sudahkah Anda mempertimbangkan menata tautan normal seperti tombol? Anda tidak dapat mencapai tombol spesifik OS seperti itu, tetapi itu masih cara IMO terbaik.

Seiring dengan apa yang ditambahkan beberapa orang, Anda dapat menjadi liar dengan hanya menggunakan kelas CSS sederhana tanpa kode PHP, tanpa jQuery , hanya HTML dan CSS sederhana.

Buat kelas CSS dan tambahkan ke jangkar Anda. Kode di bawah ini.

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

Hanya itu saja. Ini sangat mudah dilakukan dan memungkinkan Anda menjadi kreatif seperti yang Anda inginkan. Anda mengontrol warna, ukuran, bentuk (radius), dll. Untuk lebih jelasnya, lihat situs yang saya temukan ini di .

Mengapa tidak letakkan saja tombol Anda di dalam tag referensi mis 

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

Ini sepertinya berfungsi dengan baik untuk saya dan tidak menambahkan tag 20% ​​ke tautan, seperti yang Anda inginkan. Saya telah menggunakan tautan ke google untuk menunjukkan.

Anda tentu saja dapat membungkus ini dalam bentuk tag tetapi tidak perlu.

Saat menautkan file lokal lain, letakkan saja di folder yang sama dan tambahkan nama file sebagai referensi. Atau tentukan lokasi file jika dalam tidak di folder yang sama.

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

Ini juga tidak menambahkan karakter apa pun di bagian akhir URL, tetapi memiliki path proyek file sebagai url sebelum diakhiri dengan nama file. misalnya 

Jika struktur proyek saya ...

.. menunjukkan folder - menunjukkan file sementara empat | menunjukkan sub direktori atau file di folder induk

..publik
|||| ..html
|||| |||| -main.html
|||| |||| -secondary.html

Jika saya membuka main.html URLnya adalah,

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

Namun, ketika saya mengklik tombol di dalam main.html untuk mengubah ke secondary.html, URL akan menjadi, 

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

Tidak ada karakter khusus yang disertakan di akhir URL . Saya harap ini membantu ...__ By the way - (% 20 menunjukkan spasi di URL yang disandikan dan dimasukkan di tempat mereka.)

Catatan: localhost: 0000 jelas tidak akan 0000 Anda akan memiliki nomor port sendiri di sana. 

Selanjutnya? _Ijt = xxxxxxxxxxxxxx di akhir dari URL main.html, x ditentukan oleh koneksi Anda sendiri sehingga jelas tidak akan sama dengan saya.

Mungkin sepertinya saya menyatakan beberapa poin yang sangat mendasar, tetapi saya hanya ingin menjelaskan sebaik mungkin. Terima kasih telah membaca dan saya harap ini setidaknya membantu seseorang. Selamat pemrograman.

@ Nicolas, berikut ini berfungsi untuk saya karena milik Anda tidak memiliki type="button" yang mulai berlaku sebagai jenis kirim..karena saya sudah punya satu jenis kirim. Tidak berfungsi untuk saya .... dan sekarang Anda dapat menambahkan class to button atau <a> untuk mendapatkan tata letak yang diperlukan:

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

Jika Anda ingin menghindari penggunaan formulir atau input dan Anda mencari tautan yang tampak tombol, Anda dapat membuat tautan tombol yang terlihat bagus dengan pembungkus div, jangkar dan tag h2. Anda berpotensi menginginkan ini sehingga Anda dapat dengan leluasa menempatkan tombol-tautan di sekitar halaman Anda. Ini sangat berguna untuk tombol pemusatan horizontal dan memiliki teks berpusat vertikal di dalamnya. Begini caranya:

Tombol Anda akan terdiri dari tiga bagian bersarang: pembungkus div, jangkar, dan h2, seperti:

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

Kemudian di CSS, gaya Anda akan terlihat seperti ini:

.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 > h2 {
    margin: 0 auto;
    display: table-cell;
    vertical-align: middle;
    color: #f7f8f8;
    font-size: 18px;
    font-family: cabinregular;
    text-align: center;
}

Inilah a jsFiddle untuk memeriksanya dan bermain-main dengannya.

Manfaat pengaturan ini: 1. Membuat tampilan pembungkus div: blok memudahkan pemusatan (menggunakan margin: 0 otomatis) dan posisi (sementara <a> sejajar dan lebih sulit diposisikan dan tidak mungkin untuk memusatkan).

1. Anda bisa membuat tampilan <a>: blokir, pindahkan, dan gaya sebagai tombol, tetapi kemudian menyelaraskan teks secara vertikal di dalamnya menjadi sulit.

2. Ini memungkinkan Anda untuk membuat tampilan <a>: inline-table dan tampilan <h2>: table-cell, yang memungkinkan Anda untuk menggunakan perataan vertikal: tengah pada <h2> dan memusatkannya secara vertikal (yang selalu menyenangkan di sebuah tombol). Ya, Anda bisa menggunakan padding, tetapi jika Anda ingin tombol Anda mengubah ukuran secara dinamis, itu tidak akan sebersih ini.

3. Terkadang saat Anda menanamkan <a> dalam div, hanya teks yang dapat diklik, pengaturan ini membuat seluruh tombol dapat diklik.

4. Anda tidak harus berurusan dengan formulir jika Anda hanya mencoba untuk pindah ke halaman lain. Formulir dimaksudkan untuk memasukkan informasi, dan harus disediakan untuk itu.

5. Memungkinkan Anda memisahkan satu sama lain antara penataan tombol dan penataan teks (manfaatkan keunggulan? Tentu, tetapi CSS bisa terlihat buruk sehingga Anda senang membusuknya).

Itu jelas membuat hidup saya lebih mudah menata situs web seluler untuk layar berukuran variabel.

Pilihan lain adalah membuat tautan di tombol:

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

Kemudian gunakan CSS untuk menata tautan dan tombol, sehingga tautan tersebut menghabiskan seluruh ruang di dalam tombol (sehingga tidak ada klik salah oleh pengguna):

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

Saya telah membuat demo di sini .

Jika Anda ingin membuat tombol yang digunakan untuk URL di mana saja, buat kelas tombol untuk jangkar.

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

Saya tahu sudah ada banyak jawaban yang diajukan, tetapi tidak satupun dari mereka yang benar-benar mengatasi masalah tersebut. Inilah yang saya ambil solusinya:

1. Gunakan metode <form method="get"> yang OP mulai. Ini berfungsi dengan sangat baik, tetapi terkadang menambahkan ? ke URL. ? adalah masalah utama.
2. Gunakan jQuery/JavaScript untuk melakukan tautan berikut saat JavaScript diaktifkan sehingga ? tidak berakhir ditambahkan ke URL. Ini akan mulus mundur ke metode <form> untuk sebagian kecil pengguna yang tidak mengaktifkan JavaScript.
3. Kode JavaScript menggunakan delegasi acara sehingga Anda dapat melampirkan pendengar acara sebelum <form> atau <button> bahkan ada. Saya menggunakan jQuery dalam contoh ini, karena cepat dan mudah, tetapi juga bisa dilakukan di JavaScript 'Vanilla'.
4. Kode JavaScript mencegah tindakan default terjadi dan kemudian mengikuti tautan yang diberikan dalam atribut <form>action.

Contoh JSBin (cuplikan kode tidak dapat mengikuti tautan)

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

Untuk HTML 5 dan tombol gaya bersama dengan latar belakang gambar

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

7 Cara untuk melakukan itu:

1. Menggunakan window.location.href = 'URL'
2. Menggunakan window.location.replace('URL')
3. Menggunakan window.location = 'URL'
4. Menggunakan window.open('URL')
5. Menggunakan window.location.assign('URL')
6. Menggunakan HTML form
7. Menggunakan 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>

Anda juga dapat menggunakan tombol:

Misalnya, dalam sintaks 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>

Saya menggunakan ini untuk situs web yang sedang saya kerjakan dan berfungsi dengan baik !. Jika Anda ingin gaya keren juga saya akan meletakkan CSS di sini.

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

Bekerja JSFiddle di sini .

Anda dapat menggunakan javascript:

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

</html>

Ganti http://www.google.com dengan situs web Anda, pastikan untuk memasukkan http:// sebelum URL.

Anda juga dapat mengatur tombol type-property menjadi "tombol" (itu membuatnya tidak mengirimkan formulir), dan kemudian menyarangkannya di dalam tautan (membuatnya mengarahkan pengguna).

Dengan cara ini Anda bisa memiliki tombol lain dalam bentuk yang sama yang mengirimkan formulir, jika diperlukan. Saya juga berpikir ini lebih disukai dalam kebanyakan kasus daripada mengatur metode formulir dan tindakan untuk menjadi tautan (kecuali itu bentuk pencarian yang saya kira ...)

Contoh:

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

Dengan cara ini tombol pertama mengarahkan ulang pengguna, sedangkan yang kedua mengirimkan formulir.

Berhati-hatilah untuk memastikan tombol tidak memicu tindakan apa pun, karena akan menimbulkan konflik. Juga seperti yang ditunjukkan Arius, Anda harus menyadari bahwa, untuk alasan di atas, ini tidak sepenuhnya dianggap sebagai HTML yang valid, sesuai dengan standar. Namun itu berfungsi seperti yang diharapkan di Firefox dan Chrome, tapi saya belum mengujinya untuk Internet Explorer.

Orang yang menjawab menggunakan atribut <a></a> pada <button></button> sangat membantu.

TETAPI kemudian baru-baru ini, saya mengalami masalah ketika saya menggunakan tautan di dalam <form></form>.

Tombol sekarang dianggap seperti/sebagai tombol kirim (HTML5). Saya sudah mencoba mencari jalan keluar, dan telah menemukan metode ini.

Buat tombol gaya CSS seperti di bawah ini:

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

}

Atau buat yang baru di sini: CSS Button Generator

Dan kemudian buat tautan Anda dengan tag class dinamai sesuai gaya CSS yang Anda buat:

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

Ini biola:

JS Fiddle

Jika yang Anda butuhkan adalah tampilannya seperti tombol, dengan penekanan pada gambar gradien , Anda bisa melakukan ini:

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

Jika Anda ingin mengarahkan ulang ke halaman yang berada di dalam situs web Anda, maka inilah metode saya - Saya telah menambahkan atribut href ke tombol, dan klik pada this.getAttribute ('href') ke dokumen.lokasi.href

** Ini tidak akan berfungsi jika Anda mereferensikan untuk url di luar domain Anda karena 'X-Frame-Options' ke 'sameorigin'.

Kode sampel:

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

Dalam JavaScript

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

Dalam HTML

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

Apa itu Button dalam HTML?

Berfungsi apakah tombol button pada form?