如何使 HTML 链接看起来像一个按钮？

a {
display: block;
height: 20px;
width: auto;
border: 1px solid #000;
}

如果给它们一个块显示，您可以像这样使用 <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>

您可以创建一个标准按钮，然后将其用作链接的背景图像。然后，您可以在不更改图像的情况下设置链接中的文本。

最好的解决方案，如果你没有一个特殊的渲染按钮是两个已经由 TStamper 和 ÓlafurWaage。

这也进入了 css 的一些细节，并给你一些图片:

http://www.dynamicdrive.com/style/csslibrary/item/css_square_buttons/

为什么不在按钮元素周围包装一个锚标记呢。

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

这将适用于 IE9 + ，Chrome，Safari，Firefox，可能还有 Opera。

使用 林克巴顿怎么样？

恕我直言，有一个更好更优雅的解决方案。如果你的链接是这样的:

<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 元素，所以它可以在不更改任何内容的情况下工作 在所有的浏览器里。此外，如果您的按钮有样式，这个解决方案将免费应用相同的样式到您的新按钮。

使用 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"
/>

正如 TStamper 所说，您可以将 CSS 类应用到它并按照这种方式进行设计。随着 CSS 的改进，你可以用链接做的事情越来越多，现在有一些设计团队专注于为主题创建外观惊人的 CSS 按钮，等等。

例如，您可以使用-webkit-shift 属性和假类来实现带有背景色的转换。这些设计中的一些可能会变得相当古怪，但它提供了一个奇妙的替代什么可能在过去已经做了，比如说，闪光灯。

如果您想要圆角的漂亮按钮，那么使用这个类: < br/>

.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>

迟来的回答:

自从我第一次开始在 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

这个方案的优点: 它看起来像一个控件，只需为它编写一个标记 < ButtonLink id = “ mybutton”

生成的按钮是一个“真正的”HTML 按钮，因此看起来就像一个真正的按钮。您不必尝试用 CSS 模拟按钮的外观，然后在不同的浏览器上纠结于不同的外观。

虽然这些能力是有限的，但是您可以通过添加更多属性来轻松地扩展它。很可能大多数属性只需要“直接传递”到底层按钮，就像我对文本、启用和 cssclass 所做的那样。

如果有人有更简单、更干净或者更好的解决方案，我很乐意听听。这很痛苦，但很有效。

我使用 asp:Button:

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

这样，按钮的操作完全是客户端的，按钮的作用就像到 targetPage的链接。

这对我很有用。它看起来像一个按钮，行为像一个链接。例如，你可以把它加入书签。

<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>

这是我用的。链接按钮是

<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;
}

使用 这门课。当使用 a标记上的 button类应用时，它将使您的链接看起来与按钮相同。

或者

这是另一个演示 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;
}

CSS3appearance属性提供了一种使用浏览器内置的 <button>样式设计任何元素(包括锚)的简单方法:

a.btn {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
}

<body>
<a class="btn">CSS Button</a>
</body>

有一个很好的轮廓和更多的细节

你可以使用 JavaScript:

1. 用 getComputedStyle(realButton)获得真实按钮的 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>

使用下面的代码片段。

    .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);
}
}
}

通过使用边框，颜色和背景颜色属性，您可以创建一个按钮类似的 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>

希望这能有所帮助: ]

简单的按钮 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 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;