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

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

【问题讨论】:

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

标签: css


【解决方案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;
}
<a href="#" class="button">Example</a>

【讨论】:

  • 要注意的是,它需要您使用 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 中,我只能使用 &lt;button type="button"&gt;。如果没有 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 属性提供了一种使用浏览器内置 &lt;button&gt; 样式设置任何元素(包括锚点)样式的简单方法:

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

【讨论】:

【解决方案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;
}

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

【讨论】:

    【解决方案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 来做:

      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>

      【讨论】:

        【解决方案9】:

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

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

        【讨论】:

          【解决方案10】:

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

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

          【讨论】:

            【解决方案11】:

            迟来的答案:

            自从我第一次开始在 ASP 中工作以来,我一直在为此苦苦挣扎。这是我想出的最好的:

            概念:我创建了一个具有标签的自定义控件。然后在按钮中放置一个 onclick 事件,使用 JavaScript 将 document.location 设置为所需的值。

            我将控件称为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
            

            这种方案的优点:它看起来像一个控件。你为它写一个标签,

            生成的按钮是一个“真正的”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:LinkBut​​ton 怎么样?

              您可以这样做 - 我使用 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://stackoverflow.com/
              
              ">Open StackOverflow</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怎么样?

                            【讨论】:

                            猜你喜欢
                            • 2011-07-04
                            • 2012-01-11
                            • 1970-01-01
                            • 2011-07-10
                            • 2023-02-01
                            • 1970-01-01
                            • 2018-05-29
                            • 1970-01-01
                            • 1970-01-01
                            相关资源
                            最近更新 更多