我如何使一个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控件,这样如果与LinkBut​​ton混淆,我可以很容易得到。

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来做:

  1. 使用getComputedStyle(realButton)获取真正button的CSS样式。
  2. 将样式应用于所有链接。
 /* 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:LinkBut​​ton?

你可以做到这一点 – 我做了一个链接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:LinkBut​​ton ?