Làm cách nào để tạo một liên kết html trông giống như một nút?

154

Tôi đang sử dụng ASP.NET, một số nút của tôi chỉ chuyển hướng. Tôi muốn thay vào đó là các liên kết thông thường, nhưng tôi không muốn người dùng của mình nhận thấy nhiều sự khác biệt về ngoại hình. Tôi đã xem xét các hình ảnh được bao bọc bởi các neo, tức là các thẻ, nhưng tôi không muốn phải kích hoạt trình chỉnh sửa hình ảnh mỗi khi tôi thay đổi văn bản trên một nút.

css  button 
— MatthewMartin
nguồn
2
Xem câu trả lời tôi chấp nhận cho câu hỏi này: stackoverflow.com/questions/547222/
— tvanfosson
Bạn có thể sử dụng một dịch vụ như dịch vụ này để tạo CSS cho bạn sau khi bạn định cấu hình một vài khía cạnh (màu sắc, kích thước, phông chữ).
— Basil Bourque
1
Tôi sẽ trả lời cách làm điều đó với javascript nhưng câu hỏi không có thẻ "javascript"
— ilyaigpetrov
2
@ilyaigpetrov đi trước và gửi câu trả lời. Tôi đã hỏi điều này 7 năm trước và có vẻ như đó là một vấn đề phổ biến và mọi người đang cần nhiều giải pháp khác nhau.
— MatthewMartin

Câu trả lời:

213

Áp dụng lớp này cho nó

.button {
  font: bold 11px Arial;
  text-decoration: none;
  background-color: #EEEEEE;
  color: #333333;
  padding: 2px 6px 2px 6px;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #CCCCCC;
}
<a href="#" class="button">Example</a>
Mở rộng đoạn trích

— TStamper
nguồn
12
Điều hấp dẫn ở đây là nó yêu cầu bạn tái tạo giao diện của một nút bằng CSS. Nhưng thật không may, các nút trên các trình duyệt khác nhau và các phiên bản trình duyệt khác nhau trông khác nhau. Vì vậy, bạn phải chấp nhận nó trông buồn cười trong một số trình duyệt hoặc có một loạt mã để tìm ra trình duyệt nào và phiên bản nào mà người dùng có và chọn một kiểu khác. Đó là một vấn đề rất lớn và có thể phá vỡ vào lần tới khi một phiên bản mới của trình duyệt xuất hiện.
— Jay
Điều này chỉ hoạt động với tôi nếu tôi áp dụng nó cho athẻ trực tiếp ( a {display: block ...}), không được chấp nhận. Bạn có biết tại sao classthuộc tính bên trong athẻ sẽ không hoạt động không? :( Tôi đang sử dụng Firefox 27. Tôi cũng đã thử a.button {...}và nó cũng không hoạt động.
— just_a_girl
1
@Jay một thỏa hiệp có thể là xác định kiểu dáng của các phần tử <input type="submit">và / hoặc <button>để chúng không sử dụng mặc định của trình duyệt (nếu có thể), và sau đó khớp chúng với kiểu dáng .buttonnhư trên. Điều này sẽ giúp giảm bớt sự khác biệt, nếu không loại bỏ chúng hoàn toàn, và tốt hơn so với phương pháp (không đáng tin cậy - như bạn nói đúng) để đánh hơi loại và phiên bản trình duyệt.
— Ollie Bennett
@OllieBennett Đúng: Bạn hoàn toàn có thể xác định lại giao diện của một nút. Tôi đã không cố gắng để làm điều này, không chắc có bao nhiêu khía cạnh của phong cách bạn phải ghi đè. Nghe có vẻ đau, nhưng chưa thử, tôi không thể nói nó đau đến mức nào so với các lựa chọn khác.
— Jay
@CraigGjerdingen Tôi thực sự thích các kiểu bạn đã sử dụng cho .link_button. Việc sử dụng CSS3 chắc chắn cập nhật câu trả lời này. Cũng sử dụng các kiểu ít giống các nút trình duyệt "thông thường", nhưng vẫn có khả năng chi trả cho nút giải quyết vấn đề đánh hơi trình duyệt mà không cần (imo) cũng phải xác định lại các kiểu cho<input type="submit">
— Evan Donovan
128

Tại sao không chỉ quấn một thẻ neo xung quanh một yếu tố nút.

<a href="somepage.html"><button type="button">Text of Some Page</button></a>

Điều này sẽ hoạt động cho IE9 +, Chrome, Safari, Firefox và có thể là Opera.

— guanome
nguồn
8
@Dean_Wilson hãy thử phục vụ cho eg6 :(
— Robotnik
@feeel Bởi vì nó dễ dàng hơn để tôi có được một nút tìm kiếm nhất quán. Nếu bạn sử dụng CSS, nó sẽ không có kiểu dáng riêng. Một số người khác đã có câu trả lời đó.
— guanome
1
Tôi thích giải pháp này, vì bạn không cần phải cố gắng với CSS khi cố gắng bắt chước kiểu nút của trình duyệt gốc. Tuy nhiên, trong Firefox tôi đã làm cho nó chỉ hoạt động với <button type="button">. Nếu không có thuộc tính type, nó sẽ luôn thực hiện một postback và bỏ qua liên kết.
— Tobias
@Pyitoechito Tôi chắc chắn điều đó sẽ xảy ra vì Chrome và Safari có trên webkit. Có vẻ như nó sẽ jsfiddle.net/9Gt7y
— guanome
31
Nesting <button> và <a> không phải là HTML hợp lệ và có hành vi không xác định. Xem câu trả lời chi tiết tại đây stackoverflow.com/questions/6393827/ Khắc Nếu nó hoạt động, đó chỉ là một sự trùng hợp ngẫu nhiên.
— Odin
36

IMHO, có một giải pháp tốt hơn và thanh lịch hơn. Nếu liên kết của bạn là thế này:

<a href="http://www.example.com">Click me!!!</a>

Nút tương ứng phải là: 

<form method="GET" action="http://www.example.com">
<input type="submit" value="Click me!!!">
</form>

Cách tiếp cận này đơn giản hơn vì nó sử dụng các yếu tố html đơn giản, vì vậy nó sẽ hoạt động trong tất cả các trình duyệt mà không thay đổi bất cứ điều gì. Hơn nữa, nếu bạn có kiểu cho các nút của mình, giải pháp này sẽ áp dụng các kiểu tương tự cho nút mới của bạn miễn phí.

— Raul Luna
nguồn
5
Được rồi, tôi đã thử nghiệm điều này ngày hôm nay .. và .. nó hoạt động rất tốt nếu bạn không sử dụng các biểu mẫu web ASP.NET. Các biểu mẫu web ASP.NET bao bọc toàn bộ trang trong thẻ biểu mẫu và các biểu mẫu lồng nhau dường như không hoạt động gì cả - nó hoạt động bên ngoài thẻ biểu mẫu ASP.NET, nhưng điều đó giới hạn việc sử dụng các liên kết ở trên cùng và dưới cùng.
— MatthewMartin
3
Đơn giản và hiệu quả. Bạn có thể muốn thêm hiển thị: kiểu nội tuyến vào thành phần biểu mẫu. Mặt khác, nó được coi như một khối khác với nút / neo / đầu vào.
— nimrodm
Câu hỏi hay. Tôi cũng không nghĩ vậy. Nhưng các giải pháp khác được mô tả ở đây sẽ không hoạt động với googlebot, ví dụ như các giải pháp sử dụng thẻ nút.
— Raul Luna
Tôi đã thử điều này trong Django, nhưng khi nút kết thúc ở dạng khác, nó POST dữ liệu thay vì hoạt động như một liên kết.
— wobbily_col 19/03/2015
1
bạn cũng có thể làm cho nút thực hiện chuyển hướng trong javascript. nhưng bây giờ nó không phải là một liên kết - không thể "sao chép địa chỉ liên kết vào bảng tạm", nhấp chuột giữa để mở trong tab mới, v.v., xem trước mục tiêu liên kết bằng cách di chuột qua nó, v.v.
— Alexander Taylor
27

appearanceThuộc tính CSS3 cung cấp một cách đơn giản để định kiểu bất kỳ phần tử nào (bao gồm cả phần neo) với các kiểu dựng sẵn của trình duyệt <button>:

a.btn {
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
}
<body>
  <a class="btn">CSS Button</a>
</body>
Mở rộng đoạn trích

CSS Tricks có một phác thảo đẹp với nhiều chi tiết hơn về điều này. Hãy nhớ rằng không có phiên bản nào của Internet Explorer hiện hỗ trợ điều này theo caniuse.com .

— Kevin Leary
nguồn
5
Điều này đã được loại bỏ từ spec CSS3. htmlvalidator.com/help.php?m=1&h=appparent
— user1431356
22 
a {
    display: block;
    height: 20px;
    width: auto;
    border: 1px solid #000;
}

Bạn có thể chơi với <a>các thẻ như thế này nếu bạn cho chúng hiển thị khối. Bạn có thể điều chỉnh đường viền để tạo hiệu ứng như màu và màu nền cho cảm giác nút đó :)

— Chờ đợi Ólafur
nguồn
18

Nếu bạn muốn nút đẹp với các góc tròn, thì hãy sử dụng lớp này:

.link_button {
    -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);
    background: #4479BA;
    color: #FFF;
    padding: 8px 12px;
    text-decoration: none;
}
<a href="#" class="link_button">Example</a>
Mở rộng đoạn trích

— rupsray
nguồn
3
Tôi đã thêm câu trả lời này và thứ hạng cao nhất vào jsFiddle. Hãy thoải mái khám phá với jsfiddle.net/5z6ew1m0/6
— Craig Gjerdingen
Bạn có thể muốn thêm một marginvào nó quá. Nếu không, công việc tốt phong cách nó.
— c00000fd
3

Như TStamper đã nói, bạn chỉ có thể áp dụng lớp CSS cho nó và thiết kế theo cách đó. Khi CSS cải thiện số lượng những điều bạn có thể làm với các liên kết đã trở nên đặc biệt, và có những nhóm thiết kế bây giờ chỉ tập trung vào việc tạo các nút CSS trông tuyệt vời cho các chủ đề, v.v.

Ví dụ: bạn có thể chuyển tiếp với màu nền bằng cách sử dụng thuộc tính -webkit-quá trình chuyển đổi và các lớp pseduo. Một số trong những thiết kế này có thể trở nên khá hấp dẫn, nhưng nó cung cấp một sự thay thế tuyệt vời cho những gì trong quá khứ có thể đã được thực hiện với, nói, flash.

Ví dụ: theo ý kiến ​​của tôi), http://tympanus.net/Development/CreativeButtons/ (đây là một loạt các hình ảnh động hoàn toàn bên ngoài cho các nút, với mã nguồn trên trang gốc ). http://www.commentredirect.com/make-awclaw-flat-buttons-css/ (dọc theo cùng một dòng, các nút này có hiệu ứng chuyển tiếp đẹp nhưng tối giản và chúng sử dụng kiểu thiết kế "phẳng" mới.)

— bia mộ
nguồn
3

Bạn có thể làm điều đó với JavaScript:

  1. Nhận kiểu CSS của nút thực với getComputedStyle(realButton).
  2. Áp dụng các phong cách cho tất cả các liên kết của bạn.

/* javascript, after body is loaded */
'use strict';

{ // Namespace starts (to avoid polluting root namespace).
  
  const btnCssText = window.getComputedStyle(
    document.querySelector('.used-for-btn-css-class')
  ).cssText;
  document.querySelectorAll('.btn').forEach(
    (btn) => {
      
      const _d = btn.style.display; // Hidden buttons should stay hidden.
      btn.style.cssText = btnCssText;
      btn.style.display = _d;
      
    }
  );
  
} // Namespace ends.
<body>
  <h3>Button Styled Links</h3>
  <button class="used-for-btn-css-class" style="display: none"></button>
  <a href="//github.io" class="btn">first</a>
  <a href="//github.io" class="btn">second</a>
  <button>real button</button>
  <script>/* You may put JS here. */</script>
</body>
Mở rộng đoạn trích

— ilyaigpetrov
nguồn
2

Bạn có thể tạo một nút tiêu chuẩn, sau đó sử dụng nó làm hình nền cho một liên kết. Sau đó, bạn có thể đặt văn bản trong liên kết mà không thay đổi hình ảnh.

Các giải pháp tốt nhất nếu bạn không có nút kết xuất đặc biệt là hai nút đã được đưa ra bởi TStamper và Ólafur Waage.

— cjk
nguồn
2

Câu trả lời muộn màng:

Tôi đã vật lộn với điều này kể từ khi tôi bắt đầu làm việc ở ASP. Đây là thứ tốt nhất tôi nghĩ ra:

Khái niệm: Tôi tạo một điều khiển tùy chỉnh có thẻ. Sau đó, trong nút tôi đặt một sự kiện onclick đặt document.location thành giá trị mong muốn bằng JavaScript.

Tôi đã gọi nút điều khiển, để tôi có thể dễ dàng nhận được nếu bị nhầm lẫn với LinkButton.

aspx:

<%@ Control Language="VB" AutoEventWireup="false" CodeFile="ButtonLink.ascx.vb" Inherits="controls_ButtonLink" %>

<asp:Button runat="server" ID="button"/>

mã ẩn:

Partial Class controls_ButtonLink
Inherits System.Web.UI.UserControl

Dim _url As String
Dim _confirm As String

Public Property NavigateUrl As String
    Get
        Return _url
    End Get
    Set(value As String)
        _url = value
        BuildJs()
    End Set
End Property
Public Property confirm As String
    Get
        Return _confirm
    End Get
    Set(value As String)
        _confirm = value
        BuildJs()
    End Set
End Property
Public Property Text As String
    Get
        Return button.Text
    End Get
    Set(value As String)
        button.Text = value
    End Set
End Property
Public Property enabled As Boolean
    Get
        Return button.Enabled
    End Get
    Set(value As Boolean)
        button.Enabled = value
    End Set
End Property
Public Property CssClass As String
    Get
        Return button.CssClass
    End Get
    Set(value As String)
        button.CssClass = value
    End Set
End Property

Sub BuildJs()
    ' This is a little kludgey in that if the user gives a url and a confirm message, we'll build the onclick string twice.
    ' But it's not that big a deal.
    If String.IsNullOrEmpty(_url) Then
        button.OnClientClick = Nothing
    ElseIf String.IsNullOrEmpty(_confirm) Then
        button.OnClientClick = String.Format("document.location='{0}';return false;", ResolveClientUrl(_url))
    Else
        button.OnClientClick = String.Format("if (confirm('{0}')) {{document.location='{1}';}} return false;", _confirm, ResolveClientUrl(_url))
    End If
End Sub
End Class

Ưu điểm của sơ đồ này: Nó trông giống như một điều khiển. Bạn viết một thẻ duy nhất cho nó, <ButtonLink id = "mybutton" navig Nghiệpl = "blahblah" />

Nút kết quả là nút HTML "thực" và do đó trông giống như một nút thực. Bạn không cần phải cố gắng mô phỏng giao diện của một nút bằng CSS và sau đó đấu tranh với các giao diện khác nhau trên các trình duyệt khác nhau.

Trong khi các khả năng bị hạn chế, bạn có thể dễ dàng mở rộng nó bằng cách thêm nhiều thuộc tính. Có vẻ như hầu hết các thuộc tính sẽ phải "chuyển qua" cho nút bên dưới, giống như tôi đã làm cho văn bản, được kích hoạt và cssclass.

Nếu bất cứ ai có một giải pháp đơn giản hơn, sạch hơn hoặc tốt hơn, tôi rất vui khi nghe nó. Đây là một nỗi đau, nhưng nó hoạt động.

— Jay
nguồn
2

Đây là những gì tôi đã sử dụng. Nút liên kết là

<div class="link-button"><a href="/">Example</a></div>

CSS

/* body is sans-serif */ 

.link-button {
    margin-top:15px;
    max-width:90px;
    background-color:#eee;
    border-color:#888888;
    color:#333;
    display:inline-block;
    vertical-align:middle;
    text-align:center;
    text-decoration:none;
    align-items:flex-start;
    cursor:default;
    -webkit-appearence: push-button;
    border-style: solid;
    border-width: 1px;
    border-radius: 5px;
    font-size: 1em;
    font-family: inherit;
    border-color: #000;
    padding-left: 5px;
    padding-right: 5px;
    width: 100%;
    min-height: 30px;
}

.link-button a {
    margin-top:4px;
    display:inline-block;
    text-decoration:none;
    color:#333;
}

.link-button:hover {
    background-color:#888;
}

.link-button:active {
    background-color:#333;
}

.link-button:hover a, .link-button:active a {
    color:#fff;
}
— Andrew Howden
nguồn
Nó không giống như một nút mặc dù. Tôi không biết ai đã hạ bệ bạn. Đây là fiddle JS cho mã mà bạn cung cấp: jsfiddle.net/yajj2x0p
— MatthewMartin
2

Làm thế nào về việc sử dụng asp: LinkButton?

Bạn có thể làm điều đó - Tôi đã tạo một nút liên kết trông giống như một nút tiêu chuẩn, sử dụng mục nhập của TStamper. Tuy nhiên, phần gạch chân hiển thị dưới văn bản khi tôi di chuột, mặc dù text-decoration: nonecài đặt.

Tôi đã có thể dừng phần gạch chân di chuột bằng cách thêm vào style="text-decoration: none"trong nút liên kết:

<asp:LinkButton 
id="btnUpdate" 
CssClass="btnStyleTStamper" 
style="text-decoration: none" 
Text="Update Items"   
Onclick="UpdateGrid"  
runat="server"
/>
— Cơ đốc giáo
nguồn
Linkbutton tạo ra một cái gì đó trông giống như một liên kết nhưng hoạt động như một nút. Câu hỏi yêu cầu ngược lại: một cái gì đó trông giống như một nút nhưng hoạt động như một liên kết.
— Jay
2

Bằng cách sử dụng các thuộc tính viền, màu và màu nền, bạn có thể tạo một nút liên kết giống như html!

a {
background-color: white;
color: black;
padding: 5px;
text-decoration: none;
border: 1px solid black;
}
a:hover {
background-color: black;
color: white;

}
<a href="https://stackoverflow.com/

">Open StackOverflow</a>
Mở rộng đoạn trích

Hi vọng điêu nay co ich :]

— Sree Ramana
nguồn
2

Sử dụng lớp này . Nó sẽ làm cho liên kết của bạn trông giống như một nút khi được áp dụng bằng cách sử dụng buttonlớp trên athẻ.

hoặc là

ĐÂY LÀ BẤT K D DEMO JSFIDDLE

.button {
    display: inline-block;
    outline: none;
    cursor: pointer;
    border: solid 1px #da7c0c;
    background: #478dad;
    text-align: center;
    text-decoration: none;
    font: 14px/100% Arial, Helvetica, sans-serif;
    padding: .5em 2em .55em;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    -webkit-border-radius: .5em; 
    -moz-border-radius: .5em;
    border-radius: .3em;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
    background: #f47c20;
    background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
    background: -moz-linear-gradient(top,  #f88e11,  #f06015);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}
.button:active {
    position: relative;
    top: 1px;
}
— Muhammad Ashikuzzaman
nguồn
1

Tôi sử dụng một asp:Button:

<asp:Button runat="server"
            OnClientClick="return location='targetPage', true;"
            UseSubmitBehavior="False"
            Text="Button Text Here"
/>

Bằng cách này, hoạt động của nút hoàn toàn ở phía máy khách và nút này hoạt động giống như một liên kết đến targetPage.

— Tay Manus
nguồn
Công việc tốt cho thấy những gì asp:Buttontrông giống như trong thực tế, vì vậy nó có thể giúp những người dùng khác!
— Người dùng không phải là người dùng
0 

.button {
  font: bold 11px Arial;
  text-decoration: none;
  background-color: #EEEEEE;
  color: #333333;
  padding: 2px 6px 2px 6px;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #CCCCCC;
}
<a href="#" class="button">Example</a>
Mở rộng đoạn trích

0

Sử dụng đoạn trích dưới đây.

    .a{
  color: $brn-acc-clr;
  background-color: transparent;
  border-color: #888888;

  &:hover:active{
    outline: none;
    color: #888888;
    border-color: #888888;
  }
  &:fill{
    background-color: #888888;
    color: #fff;
    box-shadow: 0 3px 10px rgba(#888888, 0.5);
    &:hover:active{
      color: #fff;
    }
    &:hover:not(:disabled){
      transform: translateY(-2px);
      background-color: darken(#888888, 4);
    }
  }
}
— Thành phố Himadri
nguồn
0

Nút css đơn giản bây giờ bạn có thể chơi xung quanh với trình soạn thảo của mình

a {
  display: inline-block;
  background: #000000c9;
  color: #000;
  padding: 12px 24px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  cursor: pointer;
}
a:hover {
  background:#000
  cursor: pointer;
  transition: 0.3s ease-in;
}

Thẻ liên kết

<a href="#">Hover me<a>
— codeuix
nguồn
-1

Điều này làm việc cho tôi. Nó trông giống như một nút và hoạt động như một liên kết. Bạn có thể đánh dấu nó chẳng hạn.

<a href="mypage.aspx?param1=1" style="text-decoration:none;">
    <asp:Button PostBackUrl="mypage.aspx?param1=1" Text="my button-like link" runat="server" />
</a>
— Andrej Adamenko
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.