blocks|key|1590948|text|将此类应用于它|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1590949|​|1590950|.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;
}|code-block|syntax|javascript|1590951|<a+href="#"+class="button">Example</a>|1590952|1590953|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>Apply this class to it</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a href="#" class="button"&gt;Example&lt;/a&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1375827|text|为什么不用一个锚标签来包装一个按钮元素呢？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1375828|<a+href="somepage.html"><button+type="button">Text+of+Some+Page</button></a>|code-block|syntax|javascript|1375829|这将适用于IE9%2B，Chrome，Safari，火狐，可能还有Opera。|1375830|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Why not just wrap an anchor tag around a button element.</p>

<pre><code>&lt;a href="somepage.html"&gt;&lt;button type="button"&gt;Text of Some Page&lt;/button&gt;&lt;/a&gt;
</code></pre>

<p>This will work for IE9+, Chrome, Safari, Firefox, and probably Opera.</p>


blocks|key|1591403|text|如果你想要圆角的漂亮按钮，那么使用这个类：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1591404|​|1591405|.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;
}|code-block|syntax|javascript|1591406|<a+href="#"+class="link_button">Example</a>|1591407|1591408|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>If you want nice button with rounded corners, then use this class:<br/></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a href="#" class="link_button"&gt;Example&lt;/a&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1590899|text|a+{
++++display:+block;
++++height:+20px;
++++width:+auto;
++++border:+1px+solid+#000;
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1590900|如果你给他们一个块显示，你可以像这样玩<a>标签。您可以调整边框以提供类似于阴影的效果和按钮的背景颜色感觉:)|unstyled|offset|length|style|CODE|1590901|entityMap^0|0|J|3|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|N|8|@$G|O|H|P|I|J]]|9|@]|A|$]]|$1|K|3|-4|5|F|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<pre><code>a {
    display: block;
    height: 20px;
    width: auto;
    border: 1px solid #000;
}
</code></pre>

<p>You can play with <code>&lt;a&gt;</code> tags like this if you give them a block display. You can adjust the border to give a shade like effect and the background color for that button feel :)</p>


blocks|key|1591341|text|正如TStamper所说，您可以直接将CSS类应用于它，并以这种方式设计它。随着CSS的改进，你可以用链接做的事情的数量已经变得非同寻常了，现在有一些设计团队只专注于为主题创建外观惊人的CSS按钮，等等。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1591342|例如，您可以使用-webkit-transition属性和pseduo-classes使用背景颜色进行过渡。其中一些设计可能会变得相当疯狂，但它提供了一种奇妙的替代方案，而不是过去必须用flash完成的事情。|1591343|例如(在我看来这些是令人兴奋的)，http://tympanus.net/Development/CreativeButtons/+(这是一系列完全开箱即用的按钮动画，源代码在原始页面上)。http://www.commentredirect.com/make-awesome-flat-buttons-css/+(沿着相同的路线，这些按钮具有漂亮但简约的过渡效果，并且它们利用了新的“扁平”设计风格。)|offset|length|1591344|entityMap|0|LINK|mutability|MUTABLE|url|http://tympanus.net/Development/CreativeButtons/|1|http://www.commentredirect.com/make-awesome-flat-buttons-css/^0|0|0|H|1C|0|2N|1P|1|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@$F|U|G|V|1|W]|$F|X|G|Y|1|Z]]|A|$]]|$1|H|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|O]]|P|$5|K|L|M|A|$N|Q]]]]

<p>As TStamper said, you can just apply the CSS class to it and design it that way. As CSS improves the number of things that you can do with links has become extraordinary, and there are design groups now that just focus on creating amazing-looking CSS buttons for themes, and so forth. </p>

<p>For example, you can transitions with background-color using the -webkit-transition property and pseduo-classes. Some of these designs can get quite nutty, but it's providing a fantastic alternative to what might in the past have had to have been done with, say, flash. </p>

<p>For example (these are mind-blowing in my opinion),
<a href="http://tympanus.net/Development/CreativeButtons/" rel="nofollow">http://tympanus.net/Development/CreativeButtons/</a> (this is a series of totally out-of-the-box animations for buttons, with source code on the originating page).
<a href="http://www.commentredirect.com/make-awesome-flat-buttons-css/" rel="nofollow">http://www.commentredirect.com/make-awesome-flat-buttons-css/</a> (along the same lines, these buttons have nice but minimalistic transition effects, and they make use of the new "flat" design style.)</p>


blocks|key|1375729|text|您可以创建一个标准按钮，然后将其用作链接的背景图像。然后您可以在不更改图像的情况下设置链接中的文本。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1375730|如果你没有特殊的渲染按钮，最好的解决方案是TStamper和Ólafur+Waage已经给出的两个按钮。|1375731|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

<p>You could create a standard button, then use it as the background image for a link.  Then you can set the text in the link without changing the image.</p>

<p>The best solutions if you don't a special rendered button are the two already given by TStamper and Ólafur Waage.</p>


blocks|key|1375753|text|这也更深入了css的细节，并给出了一些图像：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1375754|http://www.dynamicdrive.com/style/csslibrary/item/css_square_buttons/|offset|length|1375755|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|1X|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@$D|O|E|P|1|Q]]|A|$]]|$1|F|3|-4|5|6|7|R|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|C]]]]

<p>This gets into the details of the css a bit more too, and gives you some images:</p>

<p><a href="http://www.dynamicdrive.com/style/csslibrary/item/css_square_buttons/" rel="nofollow noreferrer">http://www.dynamicdrive.com/style/csslibrary/item/css_square_buttons/</a></p>


blocks|key|1376196|text|迟来的答案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1376197|自从我第一次开始在ASP中工作以来，我一直在断断续续地与这个问题搏斗。这是我想出的最好的：|1376198|概念:我创建了一个带有标签的自定义控件。然后，我在按钮中放置了一个onclick事件，该事件使用JavaScript将document.location设置为所需的值。|1376199|我将控件命名为ButtonLink，以便在与LinkButton混淆时很容易理解。|1376200|aspx：|1376201|<%25@+Control+Language="VB"+AutoEventWireup="false"+CodeFile="ButtonLink.ascx.vb"+Inherits="controls_ButtonLink"+%25>

<asp:Button+runat="server"+ID="button"/>|code-block|syntax|javascript|1376202|代码隐藏：|1376203|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|1376204|此方案的优点:它看起来像一个控件。你只需要为它写一个标签，|1376205|结果按钮是一个“真正的”HTML按钮，因此看起来就像一个真正的按钮。您不必尝试用CSS模拟按钮的外观，然后在不同的浏览器上为不同的外观而苦苦挣扎。|1376206|虽然功能有限，但您可以通过添加更多属性来轻松扩展它。很可能大多数属性只需要“传递”到底层按钮，就像我对text、enabled和cssclass所做的那样。|1376207|如果有人有更简单、更干净或更好的解决方案，我很乐意听到。这是一种痛苦，但它是有效的。|1376208|entityMap^0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|13|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|14|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|15|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|16|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|17|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|18|8|@]|9|@]|A|$]]|$1|Q|3|R|5|L|7|19|8|@]|9|@]|A|$M|N]]|$1|S|3|T|5|6|7|1A|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|1B|8|@]|9|@]|A|$]]|$1|W|3|X|5|6|7|1C|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|6|7|1D|8|@]|9|@]|A|$]]|$1|10|3|-4|5|6|7|1E|8|@]|9|@]|A|$]]]|11|$]]

<p>Much belated answer:</p>

<p>I've been wrestling with this on and off since I first started working in ASP. Here's the best I've come up with:</p>

<p>Concept: I create a custom control that has a  tag. Then in the button I put an onclick event that sets document.location to the desired value with JavaScript.</p>

<p>I called the control ButtonLink, so that I could easily get if confused with LinkButton.</p>

<p>aspx:</p>

<pre><code>&lt;%@ Control Language="VB" AutoEventWireup="false" CodeFile="ButtonLink.ascx.vb" Inherits="controls_ButtonLink" %&gt;

&lt;asp:Button runat="server" ID="button"/&gt;
</code></pre>

<p>code behind:</p>

<pre><code>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
</code></pre>

<p>Advantages of this scheme: It looks like a control. You write a single tag for it, &lt;ButtonLink id="mybutton" navigateurl="blahblah"/&gt;</p>

<p>The resulting button is a "real" HTML button and so looks just like a real button. You don't have to try to simulate the look of a button with CSS and then struggle with different looks on different browsers.</p>

<p>While the abilities are limited, you can easily extend it by adding more properties. It's likely that most properties would just have to "pass thru" to the underlying button, like I did for text, enabled and cssclass.</p>

<p>If anybody's got a simpler, cleaner or otherwise better solution, I'd be happy to hear it. This is a pain, but it works.</p>


blocks|key|1376329|text|这就是我使用的。链接按钮是|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1376330|<div+class="link-button"><a+href="/">Example</a></div>|code-block|syntax|javascript|1376331|CSS|1376332|/*+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%25;
++++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;
}|1376333|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>This is what I used. Link button is </p>

<pre><code>&lt;div class="link-button"&gt;&lt;a href="/"&gt;Example&lt;/a&gt;&lt;/div&gt;
</code></pre>

<p>CSS</p>

<pre><code>/* 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;
}
</code></pre>


blocks|key|1376397|text|使用this+class。当使用a标记上的button类应用时，它将使您的链接看起来与按钮相同。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1376398|或|1376399|HERE+IS+ANOTHER+DEMO+JSFIDDLE|1376400|.button+{
++++display:+inline-block;
++++outline:+none;
++++cursor:+pointer;
++++border:+solid+1px+#da7c0c;
++++background:+#478dad;
++++text-align:+center;
++++text-decoration:+none;
++++font:+14px/100%25+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;
}|code-block|syntax|javascript|1376401|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/ydebmpwz/2/|1|http://jsfiddle.net/ydebmpwz/^0|G|1|L|6|2|A|0|0|0|0|T|1|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]|$9|11|A|12|B|C]]|D|@$9|13|A|14|1|15]]|E|$]]|$1|F|3|G|5|6|7|16|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|17|8|@]|D|@$9|18|A|19|1|1A]]|E|$]]|$1|J|3|K|5|L|7|1B|8|@]|D|@]|E|$M|N]]|$1|O|3|-4|5|6|7|1C|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]|W|$5|R|S|T|E|$U|X]]]]

<p>Use <a href="http://jsfiddle.net/ydebmpwz/2/" rel="nofollow noreferrer">this class</a>. It will make your link look the same as a button when applied using the <code>button</code> class on an <code>a</code> tag.</p>

<p>or </p>

<p><a href="http://jsfiddle.net/ydebmpwz/" rel="nofollow noreferrer">HERE IS ANOTHER DEMO JSFIDDLE</a></p>

<pre><code>.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;
}
</code></pre>


blocks|key|1376507|text|通过使用边框、颜色和背景颜色属性，您可以创建一个类似于html链接的按钮！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1376508|​|1376509|a+{
background-color:+white;
color:+black;
padding:+5px;
text-decoration:+none;
border:+1px+solid+black;
}
a:hover+{
background-color:+black;
color:+white;

}|code-block|syntax|javascript|1376510|<a+href="https://stackoverflow.com/

">Open+StackOverflow</a>|1376511|1376512|希望这能有所帮助:]|1376513|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|R|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<p>By using border, color and background color properties you can create a button lookalike html link!</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>a {
background-color: white;
color: black;
padding: 5px;
text-decoration: none;
border: 1px solid black;
}
a:hover {
background-color: black;
color: white;

}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a href="https://stackoverflow.com/

"&gt;Open StackOverflow&lt;/a&gt;</code></pre>
</div>
</div>
</p>

<p>Hope this helps :]</p>


blocks|key|1591529|text|我使用asp:Button|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1591530|<asp:Button+runat="server"
++++++++++++OnClientClick="return+location='targetPage',+true;"
++++++++++++UseSubmitBehavior="False"
++++++++++++Text="Button+Text+Here"
/>|code-block|syntax|javascript|1591531|这样，按钮的操作完全是客户端的，并且按钮的行为就像是指向targetPage的链接。|1591532|entityMap^0|3|A|0|0|S|A|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|N|$]]

<p>I use an <code>asp:Button</code>:</p>

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

<p>This way, the operation of the button is completely client-side and the button acts just like a link to the <code>targetPage</code>.</p>


blocks|key|1376411|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1376412|.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;
}|code-block|syntax|javascript|1376413|<a+href="#"+class="button">Example</a>|1376414|1376415|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a href="#" class="button"&gt;Example&lt;/a&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1591736|text|使用下面的代码段。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1591737|++++.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);
++++}
++}
}|code-block|syntax|javascript|1591738|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Use below snippet.</p>

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

  &amp;:hover:active{
    outline: none;
    color: #888888;
    border-color: #888888;
  }
  &amp;:fill{
    background-color: #888888;
    color: #fff;
    box-shadow: 0 3px 10px rgba(#888888, 0.5);
    &amp;:hover:active{
      color: #fff;
    }
    &amp;:hover:not(:disabled){
      transform: translateY(-2px);
      background-color: darken(#888888, 4);
    }
  }
}
</code></pre>


blocks|key|1376527|text|简单按钮css现在你可以使用你的编辑器了|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1376528|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;
}|code-block|syntax|javascript|1376529|链接标签|1376530|<a+href="#">Hover+me<a>|1376531|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Simple button css now you can play around with your editor</p>

<pre><code>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;
}
</code></pre>

<p>Link tag</p>

<pre><code>&lt;a href="#"&gt;Hover me&lt;a&gt;
</code></pre>


blocks|key|1591844|text|如果你需要一些很酷的效果，悬停和阴影；你可以使用这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1591845|++++.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);
++++}|code-block|syntax|javascript|1591846|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>If you need some cool effect, hover and shadow; you can use this:</p>
<pre><code>    .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);
    }
</code></pre>


blocks|key|1376296|text|这对我很有效。它看起来像一个按钮，行为像一个链接。例如，您可以将其添加为书签。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1376297|<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>|code-block|syntax|javascript|1376298|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This worked for me. It looks like a button and behaves like a link. You can bookmark it for example.</p>

<pre><code>&lt;a href="mypage.aspx?param1=1" style="text-decoration:none;"&gt;
    &lt;asp:Button PostBackUrl="mypage.aspx?param1=1" Text="my button-like link" runat="server" /&gt;
&lt;/a&gt;
</code></pre>


blocks|key|1591153|text|使用asp:LinkButton怎么样？|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1591154|entityMap|0|LINK|mutability|MUTABLE|url|http://web.archive.org/web/20110902052707/https://www.w3schools.com/aspnet/showasp.asp?filename=demo_linkbutton^0|2|E|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<p>How about using <a href="http://web.archive.org/web/20110902052707/https://www.w3schools.com/aspnet/showasp.asp?filename=demo_linkbutton" rel="nofollow noreferrer">asp:LinkButton</a>?</p>


<p>I'm using ASP.NET, some of my buttons just do redirects.  I'd rather they were ordinary links, but I don't want my users to notice much difference in the appearance.  I considered images wrapped by anchors, i.e.  tags, but I don't want to have to fire up an image editor every time I change the text on a button.</p>


How do I make an html link look like a button?

我使用的是ASP.NET，我的一些按钮只做重定向。我更希望它们是普通的链接，但我不想让我的用户注意到外观上的太大差异。我考虑过由锚点包装的图像，也就是标签，但我不想每次更改按钮上的文本时都要启动图像编辑器。

问如何使html链接看起来像一个按钮？
EN

回答 18

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使html链接看起来像一个按钮？EN

回答 18

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使html链接看起来像一个按钮？
EN