我如何使一个HTML链接看起来像一个button？
我正在使用ASP.NET，我的一些button只是redirect。 我宁愿他们是普通的链接，但我不希望我的用户注意到在外观上有很大的不同。 我考虑了由锚点（即标记）包裹的图像，但是我不希望每次更改button上的文本时都不得不启动图像编辑器。
将这个类应用到它
.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>
正如我想的那样愚蠢，我要发布这个古老的问题。
为什么不只是在一个button元素周围包装一个锚标签。
<a href="somepage.html"><button type="button">Text of Some Page</button></a>
在阅读这篇文章并尝试接受的答案没有我期待的结果，我尝试了以上，得到了我想要的。
注意
这只适用于IE9 +，Chrome，Safari，Firefox和Opera。
恕我直言，有一个更好，更优雅的解决scheme。 如果你的链接是这样的：
<a href="http://www.example.com">Click me!!!</a>
相应的button应该是这样的：
<form method="GET" action="http://www.example.com"> <input type="submit" value="Click me!!!"> </form>
这种方法更简单，因为它使用简单的html元素，所以它可以在所有的浏览器中工作，而不需要改变任何东西。 而且，如果您的button具有样式，则此解决scheme将免费为您的新button应用相同的样式。
a { display: block; height: 20px; width: auto; border: 1px solid #000; }
如果你给它们一个块显示，你可以用<a>标签来玩。 你可以调整边框来给出一个阴影效果和该button的背景色:)
CSS3 appearance属性提供了一种简单的方式来使用浏览器内置的<button>样式对任何元素（包括锚点）进行样式设置：
a.btn { -webkit-appearance: button; -moz-appearance: button; appearance: button; }
<body> <a class="btn">CSS Button</a> </body>
如果你想要圆angular的漂亮的button，那么使用这个类：
.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>
正如TStamper所说的，你可以将CSS类应用到它并devise它。 随着CSS的改进，你可以用链接做的事情变得非常多，现在有一些devise团队只是专注于为主题创build令人惊叹的CSSbutton等等。
例如，您可以使用-webkit-transition属性和pseduo-class以背景颜色进行过渡。 这些devise中的一些可能会变得非常坚固，但是它提供了一个很好的替代scheme，可以替代以前必须用闪光灯做的事情。
举例来说（这些都是我的观点）， http://tympanus.net/Development/CreativeButtons/ （这是一系列完全开箱即用的buttonanimation，源代码在源网页上）。 （沿着同样的路线，这些button具有很好但极简的过渡效果，而且它们利用了新的“扁平”devise风格。）
您可以创build一个标准button，然后将其用作链接的背景图像。 然后，您可以在链接中设置文本而不更改图像。
如果你没有一个特殊的渲染button，最好的解决scheme是TStamper和ÓlafurWaage已经给出的两个。
这也进入了更多的CSS的细节，并给你一些图像：
http://www.dynamicdrive.com/style/csslibrary/item/css_square_buttons/
很迟才回答：
自从我第一次开始使用ASP以来，我一直在为此而苦苦挣扎。 这是我所想到的最好的：
概念：我创build一个具有标签的自定义控件。 然后在button，我把一个onclick事件，将document.location设置为所需的值与JavaScript。
我调用ButtonLink控件，这样如果与LinkButton混淆，我可以很容易得到。
ASPX：
<%@ Control Language="VB" AutoEventWireup="false" CodeFile="ButtonLink.ascx.vb" Inherits="controls_ButtonLink" %> <asp:Button runat="server" ID="button"/>
代码背后：
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
这个scheme的优点：它看起来像一个控制。 你写了一个标签，<ButtonLink id =“mybutton”navigateurl =“blahblah”/>
由此产生的button是一个“真正的”HTMLbutton，因此看起来就像一个真正的button。 您不必尝试使用CSS模拟button的外观，然后在不同的浏览器上使用不同的外观。
虽然能力有限，但您可以通过添加更多属性来轻松扩展它。 很可能大多数属性只需要“传递”到底层的button，就像我为text，enabled和cssclass所做的那样。
如果有人有一个更简单，更清洁或更好的解决scheme，我很乐意听到它。 这是一个痛苦，但它的作品。
你可以用JavaScript来做：
- 使用
getComputedStyle(realButton)获取真正button的CSS样式。 - 将样式应用于所有链接。
/* 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>
使用这个类。 当使用标签上的button类应用时，它会使链接看起来与button相同。
这里是DEMO JSFIDDLE
要么
这里是另一个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; }
如何使用asp：LinkButton？
你可以做到这一点 – 我做了一个链接button看起来像一个标准的button，使用TStamper的条目。 尽pipetext-decoration: none设置，但是我在文字底下显示的是下划线。
我可以通过在linkbutton中添加style="text-decoration: none"来停止hover下划线：
<asp:LinkButton id="btnUpdate" CssClass="btnStyleTStamper" style="text-decoration: none" Text="Update Items" Onclick="UpdateGrid" runat="server" />
这是我用的。 链接button是
<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; }
我使用一个asp:Button ：
<asp:Button runat="server" OnClientClick="return location='targetPage', true;" UseSubmitBehavior="False" Text="Button Text Here" />
这样，button的操作就完全在客户端，而button就像链接到targetPage 。
这对我有效。 它看起来像一个button，行为像一个链接。 例如，您可以为其添加书签。
<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>
.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>
如何使用asp：LinkButton ？
