Button Link HTML: Cara Membuat Tombol yang Membuka Halaman

Cara membuat tombol yang menuju sebuah halaman

Tulis link biasa, <a href>, lalu beri gaya dengan CSS supaya terlihat seperti tombol. Link itu menuju halaman seperti link lainnya, dan tetap punya semua fitur link: buka di tab baru, salin alamat link, dan pratinjau URL saat kursor di atasnya.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Button link</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 16px; }
    .btn {
      display: inline-block;
      padding: 10px 18px;
      border-radius: 8px;
      background: #2563eb;
      color: #fff;
      font-weight: 600;
      text-decoration: none;
    }
    .btn:hover { background: #1d4ed8; }
    .btn:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
  </style>
</head>
<body>
  <a class="btn" href="https://developer.mozilla.org/">Read the docs</a>
</body>
</html>

Aturan yang mengubah link menjadi tombol:

• display: inline-block membuat padding bisa memperbesar kotaknya dan tetap menjaganya di baris teks.
• text-decoration: none menghapus garis bawah.
• color dan background menggantikan warna biru link.
• :focus-visible memberi pengguna keyboard cincin fokus yang jelas.

Class yang sama juga berlaku di <button>, jadi tombol submit sebuah form dan link ke halaman lain bisa terlihat sama persis sementara masing-masing menjalankan tugasnya sendiri.

Tombol atau link: elemen mana yang dipakai

Pertanyaannya adalah apa yang terjadi saat diklik, bukan seperti apa tampilannya.

Link yang diumumkan sebagai "link" dan tombol yang diumumkan sebagai "button" memberi tahu pengguna screen reader apa yang akan terjadi. Perilaku keyboard-nya juga berbeda: Enter mengaktifkan keduanya, tapi Space hanya mengaktifkan tombol (di link, Space menggulir halaman). Elemen button sendiri dibahas di [button HTML](/docs/html/button).

Kenapa tidak menaruh tombol di dalam link

Inilah pola yang paling sering dicoba orang pertama kali:

<!-- Invalid: interactive content inside <a> -->
<a href="/signup"><button>Sign up</button></a>

<!-- Invalid the other way round, too -->
<button><a href="/signup">Sign up</a></button>

Standar HTML melarang keduanya: <a> dan <button> tidak boleh berisi elemen interaktif. Dalam praktiknya, keyboard mendapat dua tab stop untuk satu kontrol, screen reader bisa mengumumkan "link, button, Sign up", dan apakah klik akan mengikuti link itu tergantung browsernya. Pilih satu elemen.

Kenapa tidak onclick dengan location.href

Cara lain yang sering dipakai adalah tombol yang mengatur URL lewat JavaScript. Tampilannya sama dengan link:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Link vs onclick</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 16px; }
    .btn {
      display: inline-block;
      padding: 10px 18px;
      border: 0;
      border-radius: 8px;
      background: #16a34a;
      color: #fff;
      font: inherit;
      text-decoration: none;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <a class="btn" href="https://example.com/">Real link</a>
  <button class="btn" type="button"
    onclick="window.open('https://example.com/')">Button with onclick</button>
  <p>Hover both, then right-click both.</p>
</body>
</html>

(Contoh ini memakai window.open karena pratinjau tidak boleh berpindah halaman; kode yang biasa dipakai adalah location.href = '...'.) Arahkan kursor dan klik kanan keduanya: hanya link sungguhan yang menampilkan URL-nya dan menawarkan "Buka link di tab baru" dan "Salin alamat link". Tombol itu juga tidak mendapat Ctrl+klik atau klik tengah, browser tidak menandainya sebagai sudah dikunjungi, dan mesin pencari tidak mengikutinya sebagai link. Kalau tujuannya adalah URL, tulis <a href>.

Tombol form yang membuka URL

Ada satu kasus di mana <button> yang menuju halaman lain adalah pilihan yang tepat: saat tombol itu ikut mengirim data. Kotak pencarian adalah contoh klasiknya. action di form adalah URL-nya dan method="get" menaruh isi field di query string:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Search form</title>
</head>
<body>
  <form action="https://duckduckgo.com/" method="get">
    <label>Search <input type="search" name="q" value="html button link" required></label>
    <button type="submit">Search</button>
    <button type="submit" formaction="https://www.bing.com/search">Search with Bing</button>
  </form>
</body>
</html>

Tekan Search: di halaman sungguhan, browser akan menuju https://duckduckgo.com/?q=html+button+link. Pratinjau menampilkan datanya, bukan berpindah halaman. formaction mengirim form yang sama ke URL lain dari tombol kedua.

Link tombol yang nonaktif

Link tidak punya atribut disabled; <a disabled> tidak melakukan apa-apa. Untuk mematikan link tombol, hapus href-nya (<a> tanpa href bukan link dan tidak bisa diklik atau difokus), lalu tandai dengan aria-disabled="true" supaya gaya dan screen reader sama-sama tahu:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Disabled link button</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 16px; }
    .btn {
      display: inline-block;
      padding: 10px 18px;
      border-radius: 8px;
      background: #2563eb;
      color: #fff;
      text-decoration: none;
    }
    .btn[aria-disabled="true"] {
      background: #e5e7eb;
      color: #6b7280;
      cursor: not-allowed;
    }
  </style>
</head>
<body>
  <a class="btn" href="https://example.com/">Continue</a>
  <a class="btn" aria-disabled="true">Continue</a>
</body>
</html>

Tekan Tab di pratinjau: fokus hanya mendarat di tombol pertama. Beberapa situs tetap menyimpan href dan menambahkan pointer-events: none, tapi itu hanya memblokir mouse. Link tetap bisa dicapai dengan Tab dan Enter tetap mengikutinya.

Tombol tab baru dan unduhan

Setiap atribut link tetap berfungsi di link yang diberi gaya seperti tombol:

<a class="btn" href="/files/guide.pdf" download>Download the guide</a>
<a class="btn" href="https://github.com/" target="_blank" rel="noopener">GitHub</a>

Ini satu alasan lagi untuk memakai <a>: <button> tidak punya download atau target. Penjelasan lebih lanjut tentang target ada di membuka link di tab baru.

Kesalahan umum

• Tombol di dalam link, atau link di dalam tombol. HTML yang tidak valid dengan perilaku yang tidak bisa ditebak.
• <button onclick="location.href=..."> untuk navigasi biasa. Tidak ada tab baru, tidak ada salin link, tidak bisa di-crawl.
• role="button" di link yang berpindah halaman. Atribut itu memberi tahu pengguna screen reader bahwa ada tombol, lalu halamannya berganti. Biarkan tetap menjadi link.
• Link yang diberi gaya tombol untuk aksi seperti "Delete" atau "Open menu" dengan href="#". Kalau tidak ada yang dimuat, pakai <button type="button">.
• <a disabled>. Atribut itu tidak ada di link. Hapus href-nya.
• Lupa menulis display: inline-block, sehingga padding vertikal menumpuk baris di atas dan di bawahnya.