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

Posted 2023-02-21

技术标签:

【中文标题】如何使 html 链接看起来像一个按钮？【英文标题】：How do I make an html link look like a button? 【发布时间】：2010-10-17 03:24:22 【问题描述】：

我使用的是 ASP.NET，我的一些按钮只是做重定向。我宁愿它们是普通的链接，但我不希望我的用户注意到外观上有很大的不同。我考虑过用锚（即标签）包裹的图像，但我不想每次更改按钮上的文本时都必须启动图像编辑器。

【问题讨论】：

查看我为这个问题接受的回复：***.com/questions/547222/… 您可以使用this one等服务在您配置好几个方面（颜色、大小、字体）后为您生成CSS。我会回答如何使用 javascript 但问题没有“javascript”标签 @ilyaigpetrov 继续发布答案。我在 7 年前问过这个问题，看起来这是一个常见问题，人们一直需要各种解决方案。 【参考方案1】：

应用这个类

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

&lt;a href="#" class="button"&gt;Example&lt;/a&gt;

【讨论】：

要注意的是，它需要您使用 CSS 重现按钮的外观。但不幸的是，不同浏览器和不同版本的浏览器上的按钮看起来不同。所以你要么必须接受它在某些浏览器中看起来很有趣，要么有一堆代码来确定用户使用哪个浏览器和哪个版本并选择不同的样式。这很麻烦，并且可能会在下一次新版本的浏览器出现时中断。这仅适用于我直接将其应用于a 标签（a display: block ...），这是不可接受的。您知道为什么 a 标签内的 class 属性不起作用吗？ :( 我使用的是 Firefox 27。我也尝试过a.button ...，但它也不起作用。 @Jay 一个折衷方案可能是定义<input type="submit"> 和/或<button> 元素的样式，以便它们不使用浏览器默认值（在可能的情况下），然后将它们与.button 的样式如上。这应该有助于减少差异，如果不能完全删除它们，并且比您（不可靠 - 正如您正确地说）嗅探浏览器类型和版本的方法更好。 @OllieBennett True：您可以完全重新定义按钮的外观。我没有尝试这样做，不确定您必须覆盖样式的多少方面。听起来很痛苦，但没有尝试过，与其他选项相比，我无法说出它的痛苦程度。 @CraigGjerdingen 我真的很喜欢你用于 .link_button 的样式。 CSS3 的使用肯定会更新这个答案。还使用不太像“常规”浏览器按钮的样式，但仍然有按钮可供性解决了浏览器嗅探问题，而 (imo) 也不必重新定义 <input type="submit"> 的样式【参考方案2】：

为什么不在按钮元素周围加上一个锚标记。

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

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

【讨论】：

@Dean_Wilson 尝试满足 ie6 :( @feeel 因为我更容易获得外观一致的按钮。如果您使用 CSS，它将没有原生样式。无论如何，其他人已经有了这个答案。我喜欢这个解决方案，因为您不必摆弄 CSS 来尝试模仿本机浏览器的按钮样式。但是，在 Firefox 中，我只能使用 <button type="button">。如果没有 type 属性，它总是会回发并忽略链接。 @Pyitoechito 我相信它会因为 Chrome 和 Safari 在 webkit 上。看起来会jsfiddle.net/9Gt7y 嵌套 【参考方案3】：

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

<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.NET 网络表单，它会很好用。 ASP.NET webforms 将整个页面包装在一个表单标记中，嵌套表单似乎根本不起作用——它确实在 ASP.NET 表单标记之外工作，但这限制了对顶部和底部链接的使用。简单有效。您可能希望将 display:inline 样式添加到表单元素。否则，它会被视为不同于按钮/锚点/输入的块。好问题。我也不这么认为。但此处描述的其他解决方案不适用于 googlebot，例如使用按钮标签的解决方案。我在 Django 中尝试过，但由于按钮最终位于另一个表单中，它发布数据而不是充当链接。您还可以让按钮在 javascript 中进行重定向。但现在它不是链接 - 无法“将链接地址复制到剪贴板”、中键单击以在新选项卡中打开等，通过鼠标悬停在链接目标上预览链接目标等。【参考方案4】：

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。

【讨论】：

这是从 CSS3 规范中删除的。 htmlvalidator.com/help.php?m=1&h=appearance【参考方案5】：

如果您想要漂亮的圆角按钮，请使用此类：

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

&lt;a href="#" class="link_button"&gt;Example&lt;/a&gt;

【讨论】：

我在 jsFiddle 中添加了这个和***别的答案。随意摆弄jsfiddle.net/5z6ew1m0/6 您可能还想在其中添加margin。否则，好好设计它。【参考方案6】：

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

如果你给它们一个块显示，你可以像这样使用<a>标签。您可以调整边框以提供类似阴影的效果和该按钮感觉的背景颜色:)

【讨论】：

【参考方案7】：

正如 TStamper 所说，您可以将 CSS 类应用于它并以这种方式设计它。随着 CSS 的改进，您可以使用链接做的事情变得非同寻常，并且现在有一些设计小组只专注于为主题创建令人惊叹的 CSS 按钮等等。

例如，您可以使用 -webkit-transition 属性和 pseduo-classes 使用背景颜色进行过渡。其中一些设计可能会变得非常疯狂，但它提供了一个极好的替代方案，可以替代过去可能不得不使用闪存来完成的工作。

例如（我认为这些令人兴奋）， http://tympanus.net/Development/CreativeButtons/（这是一系列完全开箱即用的按钮动画，源代码在原始页面上）。 http://www.commentredirect.com/make-awesome-flat-buttons-css/（同理，这些按钮具有漂亮但极简的过渡效果，并且使用了新的“扁平”设计风格。）

【讨论】：

【参考方案8】：

你可以用 JavaScript 来做：

getComputedStyle(realButton)

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

【讨论】：

【参考方案9】：

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

如果您没有特殊的渲染按钮，最好的解决方案是 TStamper 和 Ólafur Waage 已经给出的两个。

【讨论】：

【参考方案10】：

这也更深入地介绍了 css 的细节，并为您提供了一些图像：

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

【讨论】：

【参考方案11】：

迟来的答案：

自从我第一次开始在 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 所做的那样。

如果有人有更简单、更清洁或更好的解决方案，我很乐意听到。这很痛苦，但它有效。

【讨论】：

【参考方案12】：

这是我用的。链接按钮是

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

【讨论】：

虽然它看起来不像一个按钮。我不知道谁对你投了反对票。这是您提供的代码的 JS 小提琴：jsfiddle.net/yajj2x0p【参考方案13】：

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

【讨论】：

Linkbutton 创建一些看起来像链接但行为像按钮的东西。这个问题要求的是相反的：看起来像一个按钮但行为像一个链接的东西。【参考方案14】：

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

">Open ***</a>

希望这会有所帮助：]

【讨论】：

【参考方案15】：

使用this class。当使用a 标签上的button 类应用时，它会使您的链接看起来与按钮相同。

或

HERE IS ANOTHER 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;

【讨论】：

【参考方案16】：

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;

【讨论】：

【参考方案17】：

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

&lt;a href="#" class="button"&gt;Example&lt;/a&gt;

【讨论】：

【参考方案18】：

我使用asp:Button：

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

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

【讨论】：

很好地展示了asp:Button 在实践中的样子，因此它可以帮助其他用户！【参考方案19】：

在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);

【讨论】：

【参考方案20】：

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

【讨论】：

【参考方案21】：

如果你需要一些很酷的效果，悬停和阴影；你可以用这个：

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

【讨论】：

起初我以为这不是答案。然后我意识到 Emeka 一定意味着链接上应该有“按钮”类。【参考方案22】：

这对我有用。它看起来像一个按钮，行为像一个链接。例如，您可以将其添加为书签。

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

【讨论】：

【参考方案23】：

用asp:LinkButton怎么样？

【讨论】：

链接按钮，尽管有名字，但看起来就像一个链接。 w3schools.com/aspnet/showasp.asp?filename=demo_linkbutton

以上是关于如何使 html 链接看起来像一个按钮？的主要内容，如果未能解决你的问题，请参考以下文章

如何使 UIButton 看起来像电子邮件链接按钮？

CSS 使HTML按钮看起来像链接

如何使输入类型=按钮像超链接一样使用获取请求进行重定向？ [复制]

使 html 链接 href 属性等于 Ajax.ActionLink

Thymeleaf：如何使按钮链接到另一个 html 页面？

如何制作空链接？ [复制]