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

时间：2009-04-02 15:03:10

标签： css button

我正在使用ASP.NET，我的一些按钮只是重定向。我宁愿他们是普通的链接，但我不希望我的用户注意到外观上的差异。我认为用锚点包装的图像，即标签，但我不想每次更改按钮上的文本时都要启动图像编辑器。

23 个答案:

答案 0 :(得分：195)

将此课程应用于

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

答案 1 :(得分：118)

我认为这是愚蠢的，我将发布这个古老的问题。

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

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

阅读完这篇文章并尝试接受的答案时没有找到我想要的结果，我尝试了上述内容并得到了我想要的内容。

注意

这仅适用于IE9 +，Chrome，Safari，Firefox以及Opera。

答案 2 :(得分：33)

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

<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元素，因此它可以在所有浏览器中 而无需更改任何内容。此外，如果您的按钮有样式，此解决方案将免费为您的新按钮应用相同的样式。

答案 3 :(得分：22)

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。

答案 4 :(得分：20)

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

如果你给他们一个块显示，你可以使用这样的<a>标签。您可以调整边框以产生类似阴影效果，并且该按钮的背景颜色为：）

答案 5 :(得分：17)

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

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

答案 6 :(得分：3)

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

例如，您可以使用-webkit-transition属性和pseduo-classes转换为background-color。其中一些设计可能会变得非常疯狂，但它提供了一个奇妙的替代方案，可以替代过去可能已经完成的操作，比如闪存。

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

答案 7 :(得分：3)

您可以使用JavaScript：

  1. 使用getComputedStyle(realButton)获取真实按钮的CSS样式。
  2. 将样式应用于所有链接。

    3. ＆＃13;
    ＆＃13; 
    /* 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.
    ＆＃13; 
    <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>
    ＆＃13;
    ＆＃13;
    ＆＃13;

答案 8 :(得分：2)

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

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

答案 9 :(得分：2)

这也会进一步了解css的细节，并为您提供一些图像：

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

答案 10 :(得分：2)

  

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

答案 11 :(得分：2)

很多迟来的回答：

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

此方案的优点：它看起来像一个控件。你为它写了一个标签，＆lt; ButtonLink id =“mybutton”navigateurl =“blahblah”/＆gt;

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

虽然功能有限，但您可以通过添加更多属性轻松扩展它。大多数属性可能只需要“传递”到底层按钮，就像我为文本，启用和cssclass做的那样。

如果有人有更简单，更清洁或更好的解决方案，我会很高兴听到它。这很痛苦，但确实有效。

答案 12 :(得分：2)

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

HERE IS THE DEMO JSFIDDLE

或

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

答案 13 :(得分：1)

我使用asp:Button：

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

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

答案 14 :(得分：1)

通过使用边框，颜色和背景颜色属性，您可以创建类似于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 :(得分：1)

这就是我用的。链接按钮是

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

答案 16 :(得分：0)

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

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

答案 17 :(得分：0)

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

答案 18 :(得分：0)

在以下代码段中使用。

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

答案 19 :(得分：0)

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

答案 20 :(得分：0)

如果您需要一些炫酷效果，请将鼠标悬停在阴影处；您可以使用此：

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

答案 21 :(得分：0)

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;

答案 22 :(得分：-1)

如何使用asp:LinkButton？

相关问题
最新问题