Tạo một <button> đó là một liên kết trong HTML

Question

Về cơ bản, tôi thích cách mà <input type="submit"> được tạo kiểu, với nút có thể nhấp khi bạn thêm một chút CSS. Tuy nhiên, các nút thông thường không được tạo kiểu như vậy, chúng không có khả năng nhấp như vậy mà không có một số CSS hoặc JS chính và bạn phải sử dụng hình ảnh.

Tôi đã gửi các nút vào liên kết, bằng cách sử dụng tác vụ biểu mẫu, nhưng điều này yêu cầu tôi tạo biểu mẫu mới cho mỗi nút. Làm thế nào tôi có thể tìm thấy một phương tiện hạnh phúc? Sử dụng nhiều biểu mẫu gây ra vấn đề trong kiểu dáng của tôi mà dường như tôi không sửa được trừ khi tôi tìm cách khác để tạo các nút là liên kết trong HTML, có kiểu mặc định khiến chúng có trạng thái nhấn (và tôi không có ý nghĩa cài đặt mặc định của trình duyệt).

Bất kỳ ý tưởng nào?

Answer 1

Bạn có ba lựa chọn:

• liên kết Phong cách để trông giống như nút sử dụng CSS.

  Chỉ cần nhìn vào "thẻ" màu lam nhạt bên dưới câu hỏi của bạn.

  Có thể, thậm chí để cung cấp cho họ một hình thức chán nản khi được nhấp (sử dụng các lớp giả như: hoạt động), không có bất kỳ tập lệnh nào. Rất nhiều trang web lớn, chẳng hạn như Google, đang bắt đầu làm cho các nút ra khỏi phong cách CSS những ngày này dù sao, kịch bản hay không.

• Đặt một biểu mẫu riêng biệt <> xung quanh mỗi loại.

  Như bạn đã đề cập trong câu hỏi. Dễ dàng và chắc chắn sẽ hoạt động mà không có Javascript (hoặc thậm chí CSS). Nhưng nó cho biết thêm một chút mã bổ sung mà có thể trông lộn xộn.

• Dựa trên Javascript.

  Bạn nói những gì bạn không muốn làm.

Answer 2

<a href="#"><button>Link Text</button></a> 

Bạn hỏi cho một liên kết mà trông giống như một nút, vì vậy sử dụng một liên kết và một nút :-) Điều này sẽ bảo vệ mặc định nút trình duyệt phong cách. Các nút của chính nó không có gì, nhưng nhấp vào nó kích hoạt liên kết mẹ của nó.

Demo:

<a href="http://stackoverflow.com"><button>Link Text</button></a>

Answer 3

3 cách đơn giản nhất là IMHO

1: bạn tạo một hình ảnh của một nút và đặt một href xung quanh nó. (Không phải là một cách tốt, bạn sẽ mất tính linh hoạt và sẽ cung cấp rất nhiều khó khăn, vướng mắc.)

2 (đơn giản nhất) -> JQuery

<input type="submit" someattribute="http://yoururl/index.php"> 

    $('button[type=submit] .default').click(function(){ 
    window.location = $(this).attr("someattribute"); 
    return false; //otherwise it will send a button submit to the server 

    }); 

3 (cũng dễ dàng nhưng tôi thích một trước) :

<INPUT TYPE=BUTTON OnClick="somefunction("http://yoururl");return false" VALUE="somevalue"> 

$fn.somefunction= function(url) { 
    window.location = url; 
}; 

Answer 4

Dễ dàng hơn một chút và trông giống như nút trong biểu mẫu.Chỉ cần sử dụng đầu vào và bọc thẻ neo xung quanh nó.

<a href="#"><input type="button" value="Button Text"></a> 

Answer 5

Sử dụng javascript:

<button onclick="window.location.href='/css_page.html'">CSS page</button> 

Bạn luôn có thể tạo kiểu nút trong anyaways css. Hy vọng nó đã giúp!

Chúc may mắn!

Answer 6

QUAN TRỌNG:<button> không bao giờ phải là một hậu duệ của <a>.

Hãy thử <a href="http://stackoverflow.com"><button>Link Text</button></a> trong bất kỳ trình xác thực html nào như https://validator.w3.org và bạn sẽ gặp lỗi. Có thực sự không có điểm trong việc sử dụng một nút nếu bạn đang không bằng cách sử dụng nút. Chỉ cần tạo kiểu <a> với css trông giống như một nút. Nếu bạn đang sử dụng một khuôn khổ như Bootstrap, bạn có thể áp dụng kiểu nút (s) btn, btn-primary, vv

jsfiddle: button styled link

.btnStack { 
 
    font-family: Oswald; 
 
    background-color: orange; 
 
    color: white; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    padding: 6px 12px; 
 
    margin-bottom: 0; 
 
    font-size: 14px; 
 
    font-weight: normal; 
 
    line-height: 1.428571429; 
 
    text-align: center; 
 
    white-space: nowrap; 
 
    vertical-align: middle; 
 
    cursor: pointer; 
 
    border: 1px solid transparent; 
 
    border-radius: 4px; 
 
    -webkit-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    -o-user-select: none; 
 
    user-select: none; 
 
} 
 

 
a.btnStack:hover { 
 
    background-color: #000; 
 
}

<link href='https://fonts.googleapis.com/css?family=Oswald:400' rel='stylesheet' type='text/css'> 
 
<a href="http://stackoverflow.com" class="btnStack">stackoverflow.com</a>