Bagaimana cara membuat tombol HTML yang berfungsi seperti tautan?

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 apa pun di 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 menatanya agar terlihat seperti tombol .

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

HTML

Cara HTML biasa adalah dengan meletakkannya di tempat <form>Anda menentukan URL target yang diinginkan dalam actionatribut.

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

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

Secara intuitif Anda berharap dapat menggunakan <button href="https://google.com">analog dengan <a>elemen, 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 menggunakan antara lain appearanceproperti ( itu hanya tidak didukung di 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;
}

Atau pilih salah satu dari banyak pustaka CSS seperti Bootstrap .

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

JavaScript

Jika JavaScript diizinkan, atur window.location.href.

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

Alih-alih <input type="button">dalam contoh di atas, Anda juga dapat menggunakan <button>. Satu-satunya perbedaan adalah bahwa <button>elemen tersebut memungkinkan anak-anak.

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

Perhatikan bahwa type="button"atribut itu penting, karena nilai yang hilang standarnya adalah status Tombol Kirim .

Jika itu adalah tampilan visual dari tombol yang Anda cari dalam tag anchor HTML dasar, maka Anda dapat menggunakan kerangka Bootstrap Twitter untuk memformat salah satu dari tautan / tombol ketik HTML berikut ini 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">

Penampilan sampel Bootstrap (v4) :

Penampilan sampel Bootstrap (v3) :

Penampilan sampel Bootstrap (v2) :

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.

Pada HTML5, tombol mendukung formactionatribut. Yang terbaik dari semuanya, tidak ada Javascript atau tipu daya yang diperlukan.

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

Peringatan

• Harus dikelilingi oleh <form>tag.
• <button>ketik harus "kirim" (atau tidak ditentukan), saya tidak bisa membuatnya bekerja dengan ketik "tombol." Yang memunculkan poin di bawah ini.
• Mengganti tindakan default dalam formulir. Dengan kata lain, jika Anda melakukan ini di dalam bentuk lain itu akan menyebabkan konflik.

Referensi: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formaction Dukungan Browser: https://developer.mozilla.org/en-US/docs/Web/ HTML / Elemen / tombol # Browser_compatibility

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? Gunakan saja target="_blank".

EDIT

Beberapa tahun kemudian, sementara solusi saya masih berfungsi, perlu diingat Anda dapat menggunakan banyak CSS untuk membuatnya terlihat apa pun yang Anda inginkan. Ini hanya cara cepat.

Jika Anda menggunakan formulir di dalam, tambahkan tipe atribut = "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 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 akan mengarahkan semua permintaan dengan mengikuti ?ke URL yang sesuai tanpa ?. Berikut 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 itu adalah tombol nyata, itu juga akan bertindak seperti tombol nyata (misalnya perilaku yang dapat diseret dan / atau meniru klik saat menekan spasi saat aktif).
3. Tidak ada JavaScript, tidak perlu gaya rumit.

Cons:

1. Tertinggal ? terlihat jelek di beberapa browser. Ini dapat diperbaiki dengan peretasan (dalam beberapa kasus) menggunakan POST daripada GET, tetapi cara bersihnya adalah dengan memiliki pengalihan sisi server. Kelemahan dengan pengalihan sisi server adalah akan menyebabkan panggilan HTTP tambahan untuk tautan ini karena 304 pengalihan.
2. Menambahkan <form>elemen ekstra
3. Penempatan elemen saat 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 itu adalah tombol nyata, itu juga akan bertindak seperti tombol nyata (misalnya perilaku yang dapat diseret dan / atau meniru klik saat menekan spasi saat aktif).

Cons:

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

Solusi 3: Jangkar (tautan) bergaya seperti tombol.

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

Pro:

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

Cons:

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 kerumitan karena browser tidak konsisten tentang bagaimana mereka mendukung keypressacara di 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 penyesuaian sisi server layak dilakukan, 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.

Mengapa tidak letakkan saja tombol Anda di dalam tag referensi misalnya

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

Ketika menautkan file lokal lain cukup taruh 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, namun 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. Ngomong-ngomong - (% 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 jadi 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. Pemrograman senang.

Anda cukup menaruh tag di sekitar elemen:

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

https://jsfiddle.net/hj6gob8b/

Satu-satunya cara untuk melakukan ini (kecuali untuk ide bentuk cerdik BalusC!) Adalah dengan menambahkan onclickacara JavaScript 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.

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

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

.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 tempat saya menemukannya .

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

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

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

Berikut sebuah jsFiddle untuk check it out dan bermain-main dengan hal itu.

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

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

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

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

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

6. Memungkinkan Anda memisahkan satu sama lain antara penataan tombol dan penataan teks (keunggulan peregangan? Tentu, tetapi CSS bisa terlihat buruk sehingga bagus untuk menguraikannya).

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

@ Nicolas, berikut ini berfungsi untuk saya karena milik Anda tidak memilikinya type="button"karena itu mulai berperilaku sebagai jenis kirim..karena saya sudah punya satu jenis kirim. Tidak berfungsi untuk saya .... dan sekarang Anda dapat menambahkan kelas ke tombol atau <a>untuk mendapatkan tata letak yang diperlukan:

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

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 yang 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 <form method="get">metode yang OP mulai. Ini bekerja dengan sangat baik, tetapi terkadang menambahkan ?ke URL. Itu ?adalah masalah utama.
2. Gunakan jQuery / JavaScript untuk melakukan tautan berikut saat JavaScript diaktifkan sehingga ?tidak berakhir ditambahkan ke URL. Ini akan mundur dengan mulus ke <form>metode 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 <form> actionatribut.

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>

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 formulir HTML
7. Menggunakan 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>

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>

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>

jika Anda menggunakan Sertifikat SSL

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

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

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

Tombol sekarang dianggap seperti / sebagai tombol kirim (HTML5). Saya sudah mencoba mencari jalan keluar, dan 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 kelas yang dinamai sesuai gaya CSS yang Anda buat:

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

Ini biola:

JS Fiddle

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 juga dapat mengatur tombol type-propertyke "tombol" (itu membuatnya tidak mengirimkan formulir), dan kemudian bersarang 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 itu akan menimbulkan konflik. Juga seperti yang ditunjukkan Arius, Anda harus menyadari bahwa, untuk alasan di atas, ini tidak sepenuhnya dianggap sebagai HTML yang valid, menurut standar. Namun itu berfungsi seperti yang diharapkan di Firefox dan Chrome, tapi saya belum mengujinya untuk Internet Explorer.

Anda dapat menggunakan javascript:

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

</html>

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

Dalam JavaScript

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

Dalam HTML

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

Ketik window.locationdan tekan enterdi konsol browser Anda. Maka Anda bisa mendapatkan ide yang jelas tentang apa yang locationterkandung di dalamnya

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

Anda dapat menetapkan nilai apa pun dari sini.

Jadi Untuk mengarahkan ulang halaman lain Anda dapat menetapkan hrefnilai dengan tautan Anda.

   window.location.href = your link

Dalam Kasus Anda-

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

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-halaman yang berada di dalam situs web Anda, maka inilah metode saya - saya telah menambahkan atribut href ke tombol, dan onclick memberikan this.getAttribute ('href') ke document.location.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>