我使用的是 ASP.NET，我的一些按钮只是做重定向。我宁愿它们是普通的链接，但我不希望我的用户注意到外观上有很大的不同。我考虑过用锚（即标签）包裹的图像，但我不想每次更改按钮上的文本时都必须启动图像编辑器。
【问题讨论】：
标签： css
应用这个类
.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>【讨论】：
a 标签（a {display: block ...}），这是不可接受的。您知道为什么 a 标签内的 class 属性不起作用吗？ :( 我使用的是 Firefox 27。我也尝试过a.button {...}，但它也不起作用。
<input type="submit"> 和/或<button> 元素的样式，以便它们不使用浏览器默认值（在可能的情况下），然后将它们与.button 的样式如上。这应该有助于减少差异，如果不能完全删除它们，并且比您（不可靠 - 正如您正确地说）嗅探浏览器类型和版本的方法更好。
<input type="submit"> 的样式
为什么不在按钮元素周围加上一个锚标记。
<a href="somepage.html"><button type="button">Text of Some Page</button></a>
这适用于 IE9+、Chrome、Safari、Firefox，可能还有 Opera。
【讨论】：
<button type="button">。如果没有 type 属性，它总是会回发并忽略链接。
恕我直言，有一个更好、更优雅的解决方案。如果你的链接是这样的：
<a href="http://www.example.com">Click me!!!</a>
对应的按钮应该是这样的：
<form method="GET" action="http://www.example.com">
<input type="submit" value="Click me!!!">
</form>
这种方法更简单，因为它使用简单的 html 元素，因此它可以在所有浏览器中运行，而无需更改任何内容。此外，如果您的按钮有样式，此解决方案将免费为您的新按钮应用相同的样式。
【讨论】：
CSS3 appearance 属性提供了一种使用浏览器内置 <button> 样式设置任何元素（包括锚点）样式的简单方法：
a.btn {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
}<body>
<a class="btn">CSS Button</a>
</body>CSS Tricks 有一个很好的大纲，其中包含更多细节。 请注意，目前没有任何 Internet Explorer 版本支持此according to caniuse.com。
【讨论】：
如果您想要漂亮的圆角按钮，请使用此类：
.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>【讨论】：
margin。否则，好好设计它。
a {
display: block;
height: 20px;
width: auto;
border: 1px solid #000;
}
如果你给它们一个块显示，你可以像这样使用<a>标签。您可以调整边框以提供类似阴影的效果和该按钮感觉的背景颜色:)
【讨论】：
正如 TStamper 所说，您可以将 CSS 类应用于它并以这种方式设计它。随着 CSS 的改进，您可以使用链接做的事情变得非同寻常，并且现在有一些设计小组只专注于为主题创建令人惊叹的 CSS 按钮等等。
例如，您可以使用 -webkit-transition 属性和 pseduo-classes 使用背景颜色进行过渡。其中一些设计可能会变得非常疯狂，但它提供了一个极好的替代方案，可以替代过去可能不得不使用闪存来完成的工作。
例如（我认为这些令人兴奋）， http://tympanus.net/Development/CreativeButtons/（这是一系列完全开箱即用的按钮动画，源代码在原始页面上）。 http://www.commentredirect.com/make-awesome-flat-buttons-css/（同理，这些按钮具有漂亮但极简的过渡效果，并且使用了新的“扁平”设计风格。）
【讨论】：
你可以用 JavaScript 来做：
getComputedStyle(realButton)获取真实按钮的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>【讨论】：
您可以创建一个标准按钮，然后将其用作链接的背景图像。然后你可以在不改变图片的情况下设置链接中的文字。
如果您没有特殊的渲染按钮，最好的解决方案是 TStamper 和 Ólafur Waage 已经给出的两个。
【讨论】：
这也更深入地介绍了 css 的细节，并为您提供了一些图像：
http://www.dynamicdrive.com/style/csslibrary/item/css_square_buttons/
【讨论】：
迟来的答案：
自从我第一次开始在 ASP 中工作以来，我一直在为此苦苦挣扎。这是我想出的最好的：
概念：我创建了一个具有标签的自定义控件。然后在按钮中放置一个 onclick 事件，使用 JavaScript 将 document.location 设置为所需的值。
我将控件称为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
这种方案的优点：它看起来像一个控件。你为它写一个标签，
生成的按钮是一个“真正的”HTML 按钮，因此看起来就像一个真正的按钮。您不必尝试使用 CSS 模拟按钮的外观，然后在不同的浏览器上遇到不同的外观。
虽然能力有限，但您可以通过添加更多属性轻松扩展它。大多数属性可能只需要“通过”到底层按钮，就像我对文本、启用和 cssclass 所做的那样。
如果有人有更简单、更清洁或更好的解决方案，我很乐意听到。这很痛苦，但它有效。
【讨论】：
这是我用的。链接按钮是
<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:LinkButton 怎么样？
您可以这样做 - 我使用 TStamper 的条目使链接按钮看起来像标准按钮。尽管设置了text-decoration: none，但当我悬停时，下划线显示在文本下方。
我可以通过在链接按钮中添加style="text-decoration: none" 来停止悬停下划线：
<asp:LinkButton
id="btnUpdate"
CssClass="btnStyleTStamper"
style="text-decoration: none"
Text="Update Items"
Onclick="UpdateGrid"
runat="server"
/>
【讨论】：
通过使用边框、颜色和背景颜色属性，您可以创建类似按钮的 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>希望这会有所帮助：]
【讨论】：
使用this class。当使用a 标签上的button 类应用时，它会使您的链接看起来与按钮相同。
或
.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;
}
【讨论】：
HTML
<a class="btn">Button</a>
CSS
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
【讨论】：
.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:Button：
<asp:Button runat="server"
OnClientClick="return location='targetPage', true;"
UseSubmitBehavior="False"
Text="Button Text Here"
/>
这样，按钮的操作完全是客户端的，按钮的作用就像指向targetPage的链接。
【讨论】：
asp:Button 在实践中的样子，因此它可以帮助其他用户！
在sn-p下面使用。
.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);
}
}
}
【讨论】：
简单的按钮 css 现在你可以用你的编辑器来玩了
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;
}
链接标签
<a href="#">Hover me<a>
【讨论】：
如果你需要一些很酷的效果，悬停和阴影；你可以用这个：
.button {
text-decoration: none;
padding: 15px 25px;
font-size: 24px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: #450775;
border: none;
border-radius: 15px;
box-shadow: 0 9px #e1d5ed;
}
.button:hover {background-color: #220440}
.button:active {
background-color: #230545;
box-shadow: 0 5px #e1d5ed;
transform: translateY(4px);
}
【讨论】：
这对我有用。它看起来像一个按钮，行为像一个链接。例如，您可以将其添加为书签。
<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>
【讨论】：
用asp:LinkButton怎么样？
【讨论】：