Làm cách nào để tạo nút HTML hoạt động như một liên kết?

Tôi muốn tạo một nút HTML hoạt động như một liên kết. Vì vậy, khi bạn nhấp vào nút, nó sẽ chuyển hướng đến một trang. Tôi muốn nó có thể truy cập càng tốt.

Tôi cũng muốn nó để không có bất kỳ ký tự hoặc tham số bổ sung nào trong URL.

Làm thế nào tôi có thể đạt được điều này?

Dựa trên các câu trả lời được đăng cho đến nay, tôi hiện đang làm điều này:

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

nhưng vấn đề với điều này là trong Safari và Internet Explorer , nó thêm một ký tự dấu hỏi vào cuối URL. Tôi cần tìm một giải pháp không thêm bất kỳ ký tự nào vào cuối URL.

Có hai giải pháp khác để làm điều này: Sử dụng JavaScript hoặc tạo kiểu liên kết để trông giống như một nút.

Sử dụng JavaScript:

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

Nhưng điều này rõ ràng đòi hỏi JavaScript và vì lý do đó, trình đọc màn hình khó tiếp cận hơn. Điểm của một liên kết là đi đến một trang khác. Vì vậy, cố gắng để làm cho một nút hoạt động như một liên kết là giải pháp sai. Đề nghị của tôi là bạn nên sử dụng một liên kết và tạo kiểu cho nó trông giống như một nút .

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

HTML

Cách HTML đơn giản là đặt nó vào vị trí <form>mà bạn chỉ định URL mục tiêu mong muốn trong actionthuộc tính.

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

Nếu cần, hãy đặt CSS display: inline;trên biểu mẫu để giữ nó trong luồng với văn bản xung quanh. Thay vì <input type="submit">trong ví dụ trên, bạn cũng có thể sử dụng <button type="submit">. Sự khác biệt duy nhất là <button>yếu tố cho phép trẻ em.

Theo trực giác, bạn mong muốn có thể sử dụng <button href="https://google.com">tương tự với <a>phần tử, nhưng tiếc là không, thuộc tính này không tồn tại theo đặc tả HTML .

CSS

Nếu CSS được cho phép, chỉ cần sử dụng một kiểu <a>mà bạn trông giống như một nút sử dụng giữa các thuộc appearancetính khác ( nó chỉ không được hỗ trợ trong 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;
}

Hoặc chọn một trong nhiều thư viện CSS như Bootstrap .

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

JavaScript

Nếu JavaScript được cho phép, hãy đặt window.location.href.

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

Thay vì <input type="button">trong ví dụ trên, bạn cũng có thể sử dụng <button>. Sự khác biệt duy nhất là <button>yếu tố cho phép trẻ em.

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

Lưu ý rằng type="button"thuộc tính là quan trọng, vì mặc định giá trị thiếu của nó là trạng thái Nút Gửi .

Nếu đó là hình thức trực quan của một nút mà bạn đang tìm kiếm trong thẻ neo HTML cơ bản thì bạn có thể sử dụng khung Bootstrap Twitter để định dạng bất kỳ liên kết / nút loại HTML phổ biến nào sau đây để xuất hiện dưới dạng nút. Xin lưu ý sự khác biệt trực quan giữa phiên bản 2, 3 hoặc 4 của khung:

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

Xuất hiện mẫu Bootstrap (v4) :

Xuất hiện mẫu Bootstrap (v3) :

Xuất hiện mẫu Bootstrap (v2) :

Sử dụng:

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

Thật không may, đánh dấu này không còn hợp lệ trong HTML5 và sẽ không xác thực cũng như không luôn hoạt động như mong đợi. Sử dụng một cách tiếp cận khác.

Kể từ HTML5, các nút hỗ trợ formactionthuộc tính. Trên hết, không cần Javascript hay mánh khóe nào.

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

Hãy cẩn thận

• Phải được bao quanh bởi <form>các thẻ.
• <button>loại phải là "gửi" (hoặc không xác định), tôi không thể làm cho nó hoạt động với loại "nút". Mà đưa lên điểm dưới đây.
• Ghi đè hành động mặc định trong một biểu mẫu. Nói cách khác, nếu bạn làm điều này trong một hình thức khác, nó sẽ gây ra một cuộc xung đột.

Tham khảo: https://developer.mozilla.org/en-US/docs/Web/HTML/Euity/button#attr-formaction Hỗ trợ trình duyệt: https://developer.mozilla.org/en-US/docs/Web/ HTML / Element / button # Browser_compabilities

Nó là thực tế rất đơn giản và không sử dụng bất kỳ yếu tố hình thức. Bạn chỉ có thể sử dụng thẻ <a> với một nút bên trong :).

Như thế này:

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

Và nó sẽ tải href vào cùng một trang. Bạn muốn một trang mới? Chỉ cần sử dụng target="_blank".

BIÊN TẬP

Vài năm sau, trong khi giải pháp của tôi vẫn hoạt động, hãy nhớ rằng bạn có thể sử dụng rất nhiều CSS để làm cho nó trông bất cứ thứ gì bạn muốn. Đây chỉ là một cách nhanh chóng.

Nếu bạn đang sử dụng một biểu mẫu bên trong, hãy thêm thuộc tính type = "reset" cùng với phần tử nút. Nó sẽ ngăn chặn các hành động hình thức.

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

Dường như có ba giải pháp cho vấn đề này (tất cả đều có ưu và nhược điểm).

Giải pháp 1: Nút ở dạng.

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

Nhưng vấn đề với điều này là trong một số phiên bản của các trình duyệt phổ biến như Chrome, Safari và Internet Explorer, nó thêm một ký tự dấu hỏi vào cuối URL. Vì vậy, nói cách khác cho mã ở trên URL của bạn sẽ trông giống như thế này:

http://someserver/pages2?

Có một cách để khắc phục điều này, nhưng nó sẽ yêu cầu cấu hình phía máy chủ. Một ví dụ sử dụng Apache Mod_rewrite sẽ là chuyển hướng tất cả các yêu cầu có dấu ?đến URL tương ứng của chúng mà không có ?. Đây là một ví dụ sử dụng .htaccess, nhưng có một chủ đề đầy đủ ở đây :

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

Các cấu hình tương tự có thể khác nhau tùy thuộc vào máy chủ web và ngăn xếp được sử dụng. Vì vậy, một bản tóm tắt của phương pháp này:

Ưu điểm:

1. Đây là một nút thực sự, và về mặt ngữ nghĩa nó có ý nghĩa.
2. Vì là nút thực, nên nó cũng sẽ hoạt động như một nút thực (ví dụ: hành vi có thể kéo và / hoặc bắt chước một lần nhấp khi nhấn phím cách khi kích hoạt).
3. Không có JavaScript, không cần kiểu phức tạp.

Nhược điểm:

1. Trailing ?trông xấu xí trong một số trình duyệt. Điều này có thể được khắc phục bằng cách hack (trong một số trường hợp) bằng POST thay vì GET, nhưng cách rõ ràng là chuyển hướng phía máy chủ. Nhược điểm với chuyển hướng phía máy chủ là nó sẽ gây ra một cuộc gọi HTTP thêm cho các liên kết này vì chuyển hướng 304.
2. Thêm <form>yếu tố phụ
3. Định vị phần tử khi sử dụng nhiều hình thức có thể khó khăn và thậm chí còn tồi tệ hơn khi xử lý các thiết kế đáp ứng. Một số bố cục có thể trở nên không thể đạt được với giải pháp này tùy thuộc vào thứ tự của các yếu tố. Điều này có thể ảnh hưởng đến khả năng sử dụng nếu thiết kế bị ảnh hưởng bởi thách thức này.

Giải pháp 2: Sử dụng JavaScript.

Bạn có thể sử dụng JavaScript để kích hoạt onclick và các sự kiện khác để bắt chước hành vi của một liên kết bằng một nút. Ví dụ dưới đây có thể được cải thiện và xóa khỏi HTML, nhưng nó chỉ đơn giản là để minh họa ý tưởng:

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

Ưu điểm:

1. Đơn giản (đối với yêu cầu cơ bản) và giữ ngữ nghĩa trong khi không yêu cầu thêm biểu mẫu.
2. Vì là nút thực, nên nó cũng sẽ hoạt động như một nút thực (ví dụ: hành vi có thể kéo và / hoặc bắt chước một lần nhấp khi nhấn phím cách khi kích hoạt).

Nhược điểm:

1. Yêu cầu JavaScript có nghĩa là ít truy cập hơn. Điều này không lý tưởng cho một yếu tố cơ bản (cốt lõi) như liên kết.

Giải pháp 3: Neo (liên kết) được tạo kiểu như một nút.

Tạo kiểu liên kết như nút tương đối dễ dàng và có thể cung cấp trải nghiệm tương tự trên các trình duyệt khác nhau. Bootstrap làm điều này, nhưng nó cũng dễ dàng đạt được bằng cách sử dụng các kiểu đơn giản.

Ưu điểm:

1. Đơn giản (cho yêu cầu cơ bản) và hỗ trợ nhiều trình duyệt tốt.
2. Không cần phải <form>làm việc.
3. Không cần JavaScript để làm việc.

Nhược điểm:

1. Semantic là loại bị hỏng, bởi vì bạn muốn một nút hoạt động như một liên kết và không phải là một liên kết hoạt động như một nút.
2. Nó sẽ không tái tạo tất cả các hành vi của giải pháp # 1. Nó sẽ không hỗ trợ hành vi tương tự như nút. Ví dụ, các liên kết phản ứng khác nhau khi kéo. Ngoài ra, trình kích hoạt liên kết "thanh không gian" sẽ không hoạt động nếu không có thêm một số mã JavaScript. Nó sẽ thêm rất nhiều phức tạp vì các trình duyệt không nhất quán về cách chúng hỗ trợ keypresscác sự kiện trên các nút.

Phần kết luận

Giải pháp số 1 ( Nút trong một biểu mẫu ) có vẻ như minh bạch nhất cho người dùng với công việc tối thiểu cần thiết. Nếu bố cục của bạn không bị ảnh hưởng bởi lựa chọn này và điều chỉnh phía máy chủ là khả thi, thì đây là một lựa chọn tốt cho các trường hợp khả năng truy cập là ưu tiên hàng đầu (ví dụ: liên kết trên trang lỗi hoặc thông báo lỗi).

Nếu JavaScript không phải là một trở ngại đối với các yêu cầu về khả năng truy cập của bạn, thì giải pháp số 2 ( JavaScript ) sẽ được ưu tiên hơn # 1 và # 3.

Nếu vì một lý do nào đó, khả năng truy cập rất quan trọng (JavaScript không phải là một tùy chọn) nhưng bạn đang ở trong tình huống thiết kế và / hoặc cấu hình máy chủ của bạn ngăn bạn sử dụng tùy chọn # 1, sau đó là giải pháp số 3 ( Neo theo kiểu nút ) là một giải pháp thay thế tốt giải quyết vấn đề này với tác động khả năng sử dụng tối thiểu.

Tại sao không đặt nút của bạn bên trong thẻ tham chiếu, vd

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

Điều này dường như hoạt động hoàn hảo đối với tôi và không thêm bất kỳ thẻ% 20 nào vào liên kết, chỉ là cách bạn muốn. Tôi đã sử dụng một liên kết đến google để chứng minh.

Tất nhiên bạn có thể bọc cái này trong một thẻ mẫu nhưng nó không cần thiết.

Khi liên kết một tệp cục bộ khác, chỉ cần đặt nó vào cùng thư mục và thêm tên tệp làm tham chiếu. Hoặc chỉ định vị trí của tệp nếu trong không nằm trong cùng thư mục.

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

Điều này cũng không thêm bất kỳ ký tự nào vào cuối URL, tuy nhiên, nó có đường dẫn dự án tệp dưới dạng url trước khi kết thúc bằng tên của tệp. ví dụ

Nếu cấu trúc dự án của tôi là ...

.. biểu thị một thư mục - biểu thị một tệp trong khi bốn | biểu thị một thư mục con hoặc tập tin trong thư mục cha

.. công cộng
| | ..html
| | | | -main.html
|||| | | -secondary.html

Nếu tôi mở main.html thì URL sẽ là,

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

Tuy nhiên, khi tôi nhấp vào nút bên trong main.html để thay đổi thành junior.html, URL sẽ là,

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

Không có ký tự đặc biệt bao gồm ở cuối URL. Tôi hi vọng cái này giúp được. Nhân tiện - (% 20 biểu thị một khoảng trắng trong URL được mã hóa và chèn vào vị trí của chúng.)

Lưu ý: Localhost: 0000 rõ ràng sẽ không phải là 0000 bạn sẽ có số cổng của riêng mình ở đó.

Ngoài ra, cuối cùng thì?

Có vẻ như tôi đang nêu một số điểm thực sự cơ bản nhưng tôi chỉ muốn giải thích tốt nhất có thể. Cảm ơn bạn đã đọc và tôi hy vọng điều này sẽ giúp ít nhất một ai đó. Chúc bạn lập trình vui vẻ.

Bạn chỉ có thể đặt một thẻ xung quanh thành phần:

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

https://jsfiddle.net/hj6gob8b/

Cách duy nhất để làm điều này (ngoại trừ ý tưởng hình thức khéo léo của BalusC!) Là thêm một onclicksự kiện JavaScript vào nút, điều này không tốt cho khả năng truy cập.

Bạn đã xem xét phong cách một liên kết bình thường như một nút? Bạn không thể đạt được các nút cụ thể của hệ điều hành theo cách đó, nhưng đó vẫn là cách tốt nhất IMO.

Đi cùng với những gì một vài người khác đã thêm vào, bạn có thể phát cuồng chỉ bằng cách sử dụng một lớp CSS đơn giản không có PHP, không có mã jQuery , chỉ có HTML và CSS đơn giản.

Tạo một lớp CSS và thêm nó vào neo của bạn. Mã dưới đây.

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

Thế là xong. Nó rất dễ làm và cho phép bạn sáng tạo như bạn muốn. Bạn kiểm soát màu sắc, kích thước, hình dạng (bán kính), v.v ... Để biết thêm chi tiết, hãy xem trang web tôi tìm thấy trên này .

Nếu bạn muốn tránh phải sử dụng một biểu mẫu hoặc đầu vào và bạn đang tìm kiếm một liên kết trông giống nút, bạn có thể tạo các liên kết nút đẹp mắt với trình bao bọc div, neo và một h1 thẻ. Bạn có khả năng muốn điều này để bạn có thể tự do đặt nút liên kết xung quanh trang của mình. Điều này đặc biệt hữu ích cho các nút định tâm theo chiều ngang và có văn bản được căn giữa theo chiều dọc bên trong chúng. Đây là cách thực hiện:

Nút của bạn sẽ bao gồm ba phần lồng nhau: trình bao bọc div, neo và h1, như vậy:

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

Đây là một jsFiddle để kiểm tra và chơi xung quanh nó.

Lợi ích của thiết lập này: 1. Tạo màn hình trình bao bọc div: khối giúp dễ dàng căn giữa (sử dụng lề: 0 tự động) và vị trí (trong khi <a> là nội tuyến và khó định vị hơn và không thể định tâm).

2. Bạn chỉ có thể làm cho <a> display: block, di chuyển xung quanh và định kiểu nó thành một nút, nhưng sau đó việc căn chỉnh văn bản bên trong nó trở nên khó khăn.

3. Điều này cho phép bạn tạo màn hình <a>: bảng nội tuyến và màn hình <h1>: ô bảng, cho phép bạn sử dụng dọc-căn: giữa trên <h1> và căn giữa theo chiều dọc (luôn luôn đẹp một nut bâm). Có, bạn có thể sử dụng phần đệm, nhưng nếu bạn muốn nút của mình tự động thay đổi kích thước, điều đó sẽ không sạch.

4. Đôi khi, khi bạn nhúng <a> trong div, chỉ có văn bản có thể nhấp được, thiết lập này làm cho toàn bộ nút có thể nhấp.

5. Bạn không phải đối phó với các biểu mẫu nếu bạn chỉ đang cố gắng chuyển sang một trang khác. Các hình thức có nghĩa là để nhập thông tin, và chúng nên được dành riêng cho điều đó.

6. Cho phép bạn hoàn toàn tách biệt kiểu dáng nút và kiểu văn bản với nhau (lợi thế kéo dài? Chắc chắn, nhưng CSS có thể trông khó chịu vì vậy thật tuyệt khi phân tách nó).

Nó chắc chắn làm cho cuộc sống của tôi dễ dàng tạo kiểu một trang web di động cho màn hình có kích thước thay đổi.

@ Nicolas, sau đây làm việc cho tôi vì bạn không có type="button"do nó bắt đầu hoạt động như kiểu gửi .. vì vậy tôi đã có một kiểu gửi. Tôi không làm việc cho tôi .... và bây giờ bạn có thể thêm lớp để nút hoặc <a>để có được bố trí cần thiết:

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

Một tùy chọn khác là tạo một liên kết trong nút:

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

Sau đó, sử dụng CSS để tạo kiểu cho liên kết và nút, để liên kết chiếm toàn bộ không gian trong nút (để người dùng không bấm nhầm):

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

Tôi đã tạo một bản demo ở đây .

Nếu bạn muốn tạo một nút được sử dụng cho một URL ở bất cứ đâu, hãy tạo một lớp nút cho một neo.

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

Tôi biết đã có rất nhiều câu trả lời được gửi, nhưng không ai trong số họ dường như thực sự giải quyết vấn đề. Đây là một giải pháp của tôi:

1. Sử dụng <form method="get">phương thức mà OP đang bắt đầu. Điều này hoạt động thực sự tốt, nhưng đôi khi nó gắn thêm một ?URL. Đây ?là vấn đề chính.
2. Sử dụng jQuery / JavaScript để thực hiện liên kết theo sau khi JavaScript được bật để ?cuối cùng không được thêm vào URL. Nó sẽ liên tục dự phòng <form>phương thức cho một phần rất nhỏ người dùng không kích hoạt JavaScript.
3. Mã JavaScript sử dụng phân quyền sự kiện để bạn có thể đính kèm một trình lắng nghe sự kiện trước <form>hoặc<button> thậm chí tồn tại. Tôi đang sử dụng jQuery trong ví dụ này, vì nó nhanh và dễ dàng, nhưng nó cũng có thể được thực hiện bằng JavaScript 'vanilla'.
4. Mã JavaScript ngăn hành động mặc định xảy ra và sau đó theo liên kết được cung cấp trong <form> actionthuộc tính.

Ví dụ về JSBin (đoạn mã không thể theo liên kết)

// 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 cách để làm điều đó:

1. Sử dụng window.location.href = 'URL'
2. Sử dụng window.location.replace('URL')
3. Sử dụng window.location = 'URL'
4. Sử dụng window.open('URL')
5. Sử dụng window.location.assign('URL')
6. Sử dụng mẫu HTML
7. Sử dụng thẻ neo 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>

Đối với HTML 5 và nút được tạo kiểu cùng với nền hình ảnh

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

Ngoài ra, bạn có thể sử dụng một nút:

Ví dụ: trong cú pháp 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>

nếu bạn đang sử dụng Chứng chỉ SSL

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

Những người đã trả lời bằng cách sử dụng <a></a>các thuộc tính trên <button></button>là hữu ích.

NHƯNG gần đây, tôi đã gặp một vấn đề khi tôi sử dụng một liên kết bên trong a <form></form>.

Nút này hiện được coi là / như một nút gửi (HTML5). Tôi đã thử làm việc một cách và đã tìm thấy phương pháp này.

Tạo nút kiểu CSS như bên dưới:

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

}

Hoặc tạo một cái mới ở đây: Trình tạo nút CSS

Và sau đó tạo liên kết của bạn với thẻ lớp được đặt tên theo kiểu CSS bạn đã tạo:

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

Đây là một câu đố:

Fiddle

Tôi đã sử dụng điều này cho một trang web tôi hiện đang làm việc và nó hoạt động rất tốt!. Nếu bạn muốn một số kiểu dáng thú vị, tôi sẽ đặt CSS xuống đây.

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

Làm việc với JSFiddle tại đây .

Bạn cũng có thể đặt các nút type-propertythành "nút" (nó làm cho nó không gửi biểu mẫu), sau đó lồng nó vào trong một liên kết (làm cho nó chuyển hướng người dùng).

Bằng cách này, bạn có thể có một nút khác trong cùng một biểu mẫu gửi biểu mẫu, trong trường hợp cần thiết. Tôi cũng nghĩ rằng điều này tốt hơn trong hầu hết các trường hợp so với việc đặt phương thức biểu mẫu và hành động thành một liên kết (trừ khi đó là dạng tìm kiếm tôi đoán ...)

Thí dụ:

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

Bằng cách này, nút đầu tiên chuyển hướng người dùng, trong khi nút thứ hai gửi biểu mẫu.

Hãy cẩn thận để đảm bảo nút không kích hoạt bất kỳ hành động nào, vì điều đó sẽ dẫn đến xung đột. Cũng như Arius đã chỉ ra, bạn nên lưu ý rằng, vì lý do trên, điều này không hoàn toàn được coi là HTML hợp lệ, theo tiêu chuẩn. Tuy nhiên, nó hoạt động như mong đợi trong Firefox và Chrome, nhưng tôi chưa thử nghiệm nó cho Internet Explorer.

Bạn có thể sử dụng javascript:

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

</html>

Thay thế http://www.google.combằng trang web của bạn, đảm bảo bao gồm http://trước URL.

Trong JavaScript

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

Trong HTML

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

Nhập window.locationvà nhấn entertrong bảng điều khiển trình duyệt của bạn. Sau đó, bạn có thể có được ý tưởng rõ ràng những gì locationchứa

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

Bạn có thể đặt bất kỳ giá trị từ đây.

Vì vậy, để chuyển hướng một trang khác, bạn có thể đặt hrefgiá trị với liên kết của mình.

   window.location.href = your link

Trong trường hợp của bạn-

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

Nếu những gì bạn cần là nó sẽ trông giống như một nút, với sự nhấn mạnh vào hình ảnh gradient , bạn có thể làm điều này:

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

Nếu bạn muốn chuyển hướng cho các trang nằm trong trang web của mình, thì đây là phương pháp của tôi - Tôi đã thêm thuộc tính href vào nút và onclick đã gán this.getAttribution ('href') cho document.location.href

** Sẽ không hoạt động nếu bạn tham chiếu các url bên ngoài tên miền của mình vì 'Tùy chọn khung X' thành 'sameorigin'.

Mã mẫu:

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