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

153

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

css  button 
— 马修·马丁
source
2
见我接受了这个问题的答案：stackoverflow.com/questions/547222/...
— tvanfosson
您可以使用服务，如这一个来为您生成CSS配置的几个方面（颜色，大小，字体）之后。
— 罗勒·布尔克
1
我会回答如何用JavaScript做，但问题没有“JavaScript的”标签
— ilyaigpetrov
2
@ilyaigpetrov继续发布答案。我7年前问过这个问题，看来这是一个普遍的问题，人们一直在寻求各种解决方案。
— 马修·马丁

Answers:

212

将课程应用于

.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
source
12
要注意的是，它要求您使用CSS重现按钮的外观。但是不幸的是，不同浏览器和不同版本的浏览器上的按钮看起来不同。因此，您要么必须在某些浏览器中接受它看起来很有趣，要么要使用一堆代码来找出用户所使用的浏览器和版本，并选择其他样式。这是一个很大的麻烦，并且可能在下次发布新版本的浏览器时中断。
— 杰伊
仅当我将其a直接应用于标记（a {display: block ...}）时，这才对我有用，这是不可接受的。您知道为什么class标记内的属性a不起作用吗？:(我使用的是Firefox 27。我也尝试过a.button {...}，它并不能工作。
— just_a_girl
1
@Jay的一个折衷办法是定义<input type="submit">和/或<button>元素的样式，以使它们不使用浏览器默认值（如果可能），然后将它们与上述样式匹配.button。如果不能完全消除差异，这应该有助于减少差异，并且比嗅探浏览器类型和版本的方法（不可靠-正如您正确地说）要好。
— Ollie Bennett
@OllieBennett是的：您可以完全重新定义按钮的外观。我没有尝试这样做，不确定您必须覆盖样式的多少个方面。听起来像是一种痛苦，但没有尝试过，我不能说与其他选择相比有多少痛苦。
— 2014年
@CraigGjerdingen我真的很喜欢您用于.link_button的样式。CSS3的使用肯定会更新此答案。还使用不太像“常规”浏览器按钮的样式，但是仍然具有按钮承受能力，从而解决了浏览器嗅探的问题，而无需（imo）也不必重新定义样式<input type="submit">
— Evan Donovan
128

为什么不只是在按钮元素周围包裹锚标签。

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

这将适用于IE9 +，Chrome，Safari，Firefox和Opera。

— 鸟粪
source
8
@Dean_Wilson尝试满足ie6 :(
— Robotnik
@feeel因为对我而言，获得一致外观的按钮比较容易。如果使用CSS，则不会具有本机样式。无论如何，其他人已经有了答案。
— guanome 2012年
1
我喜欢这种解决方案，因为您不必摆弄CSS来模仿本地浏览器的按钮样式。但是，在Firefox中，我只能使用<button type="button">。没有type属性，它将始终执行回发并忽略链接。
— Tobias
@Pyitoechito我敢肯定，因为Chrome和Safari都在webkit中。看起来它将是jsfiddle.net/9Gt7y
— guanome
31
嵌套<button>和<a>无效的HTML，并且具有未定义的行为。在这里查看详细的答案stackoverflow.com/questions/6393827/…如果可行，这只是一个巧合。
— 奥丁
36

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

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

— 劳尔·卢娜（Raul Luna）
source
5
好的，我今天对此进行了测试。..如果您不使用ASP.NET Webform，它的效果很好。ASP.NET Web窗体将整个页面包装在一个窗体标签中，而嵌套窗体似乎根本不起作用-它确实在ASP.NET窗体标签之外起作用，但是这限制了顶部和底部链接的使用。
— 马修·马丁
3
简单有效。您可能想将display：inline样式添加到form元素。否则，将其视为不同于按钮/锚定/输入的块。
— nimrodm
好问题。我也不这么认为。但是此处介绍的其他解决方案不适用于googlebot，例如使用button标签的解决方案。
— 2014年
我在Django中尝试过此操作，但是由于按钮最终以另一种形式出现，因此它会发布数据，而不是充当链接。
— wobbily_col 2015年
1
您还可以使按钮在javascript中进行重定向。但现在它不是一个链接-不能“复制链接地址剪贴板”，中间点击在新标签页等打开，将鼠标悬停在用鼠标等进行预览链接目标
— 亚历山大·泰勒
27

CSS3 appearance属性提供了一种简单的方式来使用浏览器的内置<button>样式来设置任何元素（包括锚）的样式：

a.btn {
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
}
<body>
  <a class="btn">CSS Button</a>
</body>
展开摘要

CSS技巧有一个不错的轮廓，上面有更多详细信息。请记住，根据caniuse.com，当前没有Internet Explorer版本支持此功能。

— 凯文·李瑞
source
5
这是从CSS3规范中删除的。htmlvalidator.com/help.php?m=1&h=appearance
— user1431356
22 
a {
    display: block;
    height: 20px;
    width: auto;
    border: 1px solid #000;
}

<a>如果给它们块显示，则可以使用这样的标签进行播放。您可以调整边框以提供类似阴影的效果以及该按钮感觉的背景色：）

— ÓlafurWaage
source
18

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

.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>
展开摘要

— 卢普雷
source
3
我在jsFiddle中添加了这个和最高等级的答案。随意摆弄jsfiddle.net/5z6ew1m0/6
— Craig Gjerdingen 2014年
您可能也要添加一个margin。否则，请做好样式设计。
— c00000fd
3

正如TStamper所说，您可以将CSS类应用于它并以这种方式进行设计。随着CSS的改进，您可以使用链接执行的操作数量变得异常多，并且现在有一些设计小组专注于为主题创建外观精美的CSS按钮，等等。

例如，您可以使用-webkit-transition属性和pseduo-classs使用background-color进行过渡。这些设计中的一些可以变得非常实用，但是它提供了一种绝妙的替代方法，可以替代过去必须用闪存完成的设计。

例如（我认为这些令人难以置信）， http：//tympanus.net/Development/CreativeButtons/（这是一系列完全开箱即用的动画按钮，其源代码位于原始页面上）。 http://www.commentredirect.com/make-awesome-flat-buttons-css/（沿着同一行，这些按钮具有不错的但极简的过渡效果，并且它们使用了新的“ flat”设计风格。）

— 女牛仔
source
3

您可以使用JavaScript来做到这一点：

  1. 使用获取真实按钮的CSS样式getComputedStyle(realButton)。
  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>
展开摘要

— 伊利亚格佩特罗夫
source
2

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

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

— j
source
2

迟来的答案很多：

自从我第一次开始在ASP中工作以来，我一直在努力地解决这个问题。这是我想出的最好的方法：

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

我将其称为ButtonButton控件，以便与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

该方案的优点：它看起来像一个控件。您为此写了一个标签，<ButtonLink id =“ mybutton” navigationurl =“ blahblah” />

结果按钮是一个“真实的” HTML按钮，因此看起来就像一个真实的按钮。您不必尝试使用CSS模拟按钮的外观，而后在不同的浏览器上尝试不同的外观。

尽管功能有限，但是您可以通过添加更多属性来轻松扩展它。就像我对文本，enabled和cssclass所做的那样，大多数属性可能只需要“通过”即可到达基础按钮。

如果有人有一个更简单，更清洁或其他更好的解决方案，我很高兴听到。这很痛苦，但是有效。

— 周杰伦
source
2

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

<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;
}
— 安德鲁·豪顿
source
它看起来并不像一个按钮。我不知道谁打败了你。这是您提供的代码的JS小提琴：jsfiddle.net/yajj2x0p
— MatthewMartin 2014年
2

如何使用asp：LinkBut​​ton？

您可以做到-使用TStamper的条目，使linkbutton看起来像标准按钮。尽管有text-decoration: none设置，但是当我将鼠标悬停时，文字下方仍显示下划线。

我可以通过style="text-decoration: none"在linkbutton中添加来停止悬停下划线：

<asp:LinkButton 
id="btnUpdate" 
CssClass="btnStyleTStamper" 
style="text-decoration: none" 
Text="Update Items"   
Onclick="UpdateGrid"  
runat="server"
/>
— 基督教
source
Linkbutton创建类似于链接但类似于按钮的内容。这个问题提出了相反的要求：看起来像一个按钮但充当一个链接的东西。
— 杰伊
2

通过使用边框，颜色和背景颜色属性，您可以创建类似于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>
展开摘要

希望这可以帮助 ：]

— 斯瑞·拉玛娜（Sree Ramana）
source
2

使用此类。使用标记button上的类将其链接与按钮一样a。

要么

这是另一个演示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;
}
— 穆罕默德·阿希库扎曼
source
1

我使用asp:Button：

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

这样，按钮的操作完全在客户端，并且按钮的行为就像到的链接一样targetPage。

— 手的手
source
asp:Button在实践中表现出色的好工作，可以为其他用户提供帮助！
— 不是用户的用户
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>
展开摘要

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);
    }
  }
}
— 希玛德里·曼达尔
source
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>
— 编码库
source
-1

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

<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>
— 安德烈·亚当缅科（Andrej Adamenko）
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.