Nút link HTML: cách tạo nút bấm mở sang trang khác

Cách tạo nút dẫn tới một trang

Viết một link bình thường, <a href>, và định dạng bằng CSS để nó trông như nút. Nó dẫn tới trang như mọi link, và giữ mọi tính năng của link: mở trong tab mới, sao chép địa chỉ liên kết và xem trước URL khi rê chuột.

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

Các quy tắc biến một link thành nút:

• display: inline-block cho padding đẩy khung rộng ra mà vẫn giữ nó trên dòng chữ.
• text-decoration: none bỏ gạch chân.
• color và background thay cho màu xanh của link.
• :focus-visible cho người dùng bàn phím một vòng focus rõ ràng.

Cùng class đó dùng được cho <button>, nên nút gửi form và link sang trang khác có thể trông giống hệt nhau trong khi mỗi cái làm đúng việc của mình.

Nút hay link: dùng phần tử nào

Câu hỏi là điều gì xảy ra khi nhấp, không phải nó trông thế nào.

Một link được đọc là "link" và một nút được đọc là "button" cho người dùng trình đọc màn hình biết điều gì sắp xảy ra. Cách dùng bàn phím cũng khác: Enter kích hoạt cả hai, nhưng Space chỉ kích hoạt nút (trên link, Space cuộn trang). Bản thân phần tử nút có ở trang nút HTML.

Vì sao không đặt nút bên trong link

Đây là cách hầu hết mọi người thử đầu tiên:

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

Chuẩn HTML cấm cả hai: <a> và <button> không được chứa phần tử tương tác. Trên thực tế bàn phím gặp hai điểm dừng Tab cho một nút, trình đọc màn hình có thể đọc "link, button, Sign up", và một cú nhấp có đi theo link hay không là tùy trình duyệt. Hãy chọn một phần tử.

Vì sao không dùng onclick với location.href

Cách lách phổ biến khác là một nút đặt URL bằng JavaScript. Nó trông giống hệt một 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>

(Ví dụ dùng window.open vì khung xem trước không được rời trang; code thường gặp là location.href = '...'.) Hãy rê chuột và nhấp chuột phải vào cả hai: chỉ link thật hiện URL và có "Mở liên kết trong thẻ mới" và "Sao chép địa chỉ liên kết". Nút cũng không nhận Ctrl+click hay nhấp chuột giữa, trình duyệt không đánh dấu nó là đã truy cập, và công cụ tìm kiếm không đi theo nó như một link. Nếu đích đến là một URL, hãy viết <a href>.

Nút trong form mở một URL

Có một trường hợp nút <button> dẫn sang trang khác là đúng: khi nó gửi kèm dữ liệu. Ô tìm kiếm là ví dụ kinh điển. action của form là URL, và method="get" đưa các trường vào chuỗi truy vấn:

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

Nhấn Search: trên trang thật, trình duyệt sẽ đi tới https://duckduckgo.com/?q=html+button+link. Khung xem trước hiển thị dữ liệu thay vì rời trang. formaction gửi cùng form đó tới một URL khác từ nút thứ hai.

Nút link bị vô hiệu hóa

Link không có thuộc tính disabled; <a disabled> chẳng làm gì cả. Để tắt một nút link, hãy xóa href của nó (thẻ <a> không có href không phải link, không nhấp hay focus được), và đánh dấu bằng aria-disabled="true" để cả CSS lẫn trình đọc màn hình đều biết:

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

Nhấn Tab trong khung xem trước: focus chỉ dừng ở nút đầu tiên. Một số trang giữ href và thêm pointer-events: none, nhưng cách này chỉ chặn chuột. Link vẫn tới được bằng Tab và Enter vẫn đi theo nó.

Nút mở tab mới và nút tải xuống

Mọi thuộc tính của link vẫn hoạt động trên link được định dạng như nút:

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

Đây là thêm một lý do để dùng <a>: <button> không có download hay target. Xem thêm về target ở trang mở link trong tab mới.

Lỗi thường gặp

• Nút trong link, hoặc link trong nút. HTML không hợp lệ, hoạt động khó lường.
• <button onclick="location.href=..."> chỉ để chuyển trang. Không mở được tab mới, không sao chép được link, không được thu thập dữ liệu.
• role="button" trên một link chuyển trang. Nó báo cho người dùng trình đọc màn hình rằng đó là nút, rồi trang lại đổi. Hãy để nó là link.
• Link định dạng như nút cho các thao tác như "Xóa" hay "Mở menu" với href="#". Nếu không có gì được tải, hãy dùng <button type="button">.
• <a disabled>. Link không có thuộc tính này. Hãy xóa href.
• Quên display: inline-block, khiến padding dọc đè lên các dòng phía trên và phía dưới.