如何创建一个像链接一样的HTML按钮？

anchorbuttonhtmlhtmlbuttonhyperlink

How to create an HTML button that acts like a link?

我想创建一个HTML按钮，其作用类似于链接。所以，当你点击这个按钮时，它会重定向到一个页面。我希望它尽可能容易接近。

我也希望这样，在URL中没有任何额外的字符或参数。

我怎样才能做到这一点？

根据目前发布的答案，我目前正在进行以下操作：

1
2
3

<form method="get" action="/page2">
<button type="submit">Continue</button>
</form>

但问题在于，在Safari和Internet Explorer中，它在URL的末尾添加了问号字符。我需要找到一个不在URL末尾添加任何字符的解决方案。

还有另外两种解决方案可以做到这一点：使用javascript或设计链接的样式，使其看起来像一个按钮。

使用javascript：

1	<button onclick="window.location.href='/page2'">Continue</button>

但这显然需要JavaScript，因此屏幕阅读器无法访问它。链接的目的是转到另一页。因此，试图让按钮像链接一样工作是错误的解决方案。我的建议是，您应该使用一个链接，并将其样式设置为一个按钮。

Continue

相关讨论

HTML

普通的HTML方法是将其放在

中，在action属性中指定所需的目标URL。

1
2
3

如有必要，在表单上设置css display: inline;以使其与周围的文本保持一致。在上面的示例中，您也可以使用

1 2	<button onclick="location.href='http://www.example.com'" type="button"> www.example.com</button>

相关讨论

如果你在一个基本的HTML定位标记中寻找的是一个按钮的视觉外观，那么你可以使用Twitter引导框架来格式化以下任何常见的HTML类型链接/按钮，使其显示为一个按钮。请注意框架版本2、3或4之间的视觉差异：

1
2
3
4

Link
<button class="btn" type="submit">Button</button>
<input class="btn" type="button" value="Input">
<input class="btn" type="submit" value="Submit">

引导(v4)示例外观：

引导(v3)示例外观：

引导(v2)示例外观：

相关讨论

用途：

1	<button>Click me</button>

不幸的是，此标记在HTML5中不再有效，既不会验证，也不会始终按预期工作。使用另一种方法。

相关讨论

从HTML5开始，按钮支持formaction属性。最重要的是，不需要任何javascript或欺骗。

1
2
3

<form>
<button formaction="http://stackoverflow.com">Go to Stack Overflow!</button>
</form>

告诫

必须用
标签包围。
重写窗体中的默认操作。换句话说，如果你在另一种形式中这样做，就会引起冲突。

参考：https://developer.mozilla.org/en-us/docs/web/html/element/button_attr-formation浏览器支持：https://developer.mozilla.org/en-us/docs/web/html/element/button浏览器兼容性

相关讨论

它实际上非常简单，不使用任何形式的元素。您只需使用标签中的按钮：)。

这样地：

1	<button>Click me !</button>

它将把这个href加载到同一个页面中。想要新页面吗？只需使用target="_blank"。

相关讨论

如果使用的是内部窗体，请将属性type="reset"与button元素一起添加。它将阻止窗体操作。

1
2
3

<button type="reset" onclick="location.href='http://www.example.com'">
www.example.com
</button>

1
2
3
4

相关讨论

这个问题似乎有三种解决方案(都有利弊)。

解决方案1：窗体中的按钮。

1
2
3

<form method="get" action="/page2">
<button type="submit">Continue</button>
</form>

但问题在于，在一些流行的浏览器版本(如Chrome、Safari和Internet Explorer)中，它在URL末尾添加了问号字符。所以换句话说，对于URL上面的代码，最终会出现如下情况：

1	http://someserver/pages2?

有一种方法可以解决这个问题，但它需要服务器端配置。使用apache mod eu rewrite的一个例子是将所有带有尾随的?的请求重定向到它们相应的URL，而不使用?。下面是一个使用.htaccess的示例，但这里有一个完整的线程：

1 2	RewriteCond %{THE_REQUEST} \?\ HTTP [NC] RewriteRule ^/?(index\.cfm)? /? [R=301,L]

类似的配置可能因使用的Web服务器和堆栈而异。因此，对这种方法的总结是：

赞成的意见：

这是一个真正的按钮，从语义上讲是有意义的。

因为它是一个真正的按钮，所以它也会像一个真正的按钮(例如，可拖动的行为和/或在活动时按空格键时模拟单击)。

没有javascript，不需要复杂的样式。

欺骗：

在某些浏览器中，尾随的?看起来很难看。这可以通过黑客(在某些情况下)使用post而不是get来解决，但最干净的方法是使用服务器端重定向。服务器端重定向的缺点是，由于304重定向，它将导致对这些链接的额外HTTP调用。

添加额外的
元素

当使用多个表单时，元素的定位可能很棘手，并且在处理响应设计时会变得更糟。根据元素的顺序，使用此解决方案可能无法实现某些布局。如果设计受到这个挑战的影响，这可能最终会影响可用性。

解决方案2：使用javascript。

可以使用javascript触发onclick和其他事件，以使用按钮模拟链接的行为。下面的例子可以改进并从HTML中删除，但它只是为了说明这个想法：

1	<button onclick="window.location.href='/page2'">Continue</button>

赞成的意见：

简单(用于基本需求)并保持语义，而不需要额外的形式。

因为它是一个真正的按钮，所以它也会像一个真正的按钮(例如，可拖动的行为和/或在活动时按空格键时模拟单击)。

欺骗：

需要javascript，这意味着不太容易访问。这不适用于基本(核心)元素，如链接。

解决方案3：锚(链接)的样式像一个按钮。

将链接设置为按钮的样式相对容易，并且可以在不同的浏览器中提供类似的体验。引导程序可以做到这一点，但使用简单的样式也很容易实现。

赞成的意见：

简单(基本要求)和良好的跨浏览器支持。

不需要
即可工作。

不需要使用javascript。

欺骗：

语义是一种破坏，因为您需要一个像链接一样的按钮，而不是像按钮一样的链接。

它不会复制解决方案1的所有行为。它将不支持与按钮相同的行为。例如，拖动链接时的反应不同。此外，"空格键"链接触发器在没有一些额外的javascript代码的情况下也无法工作。这会增加很多复杂性，因为浏览器在如何支持按钮上的keypress事件方面不一致。

结论

解决方案1(表单中的按钮)对于需要最少工作的用户来说似乎是最透明的。如果您的布局不受此选择的影响，并且服务器端调整是可行的，那么对于可访问性是最高优先级的情况(例如错误页上的链接或错误消息)，这是一个很好的选择。

如果javascript不是您的可访问性要求的障碍，那么解决方案2(javascript)将优于1和3。

如果出于某种原因，可访问性是至关重要的(javascript不是一个选项)，但您的设计和/或服务器配置阻止您使用选项1，那么解决方案3(锚点样式像按钮)是一个很好的替代方案，它可以以最小的可用性影响来解决这个问题。

您只需在元素周围放置一个标记：

1	<button>My Button</button>

https://jsfiddle.net/hj6gob8b8b/

相关讨论

做以下事情有什么坏处吗？

1	<span class='button'>Schedule</span>

其中，a.nostyle是一个具有链接样式的类(在该类中，可以去掉标准链接样式)，而span.button是一个具有"按钮"样式的类(背景、边框、渐变等)。

相关讨论

为什么不把你的按钮放在参考标签里，例如

1	<button>Next</button>

这对我来说似乎很好，并且不会在链接中添加任何%20标记，这正是你想要的。我用谷歌的链接来演示。

当然，您可以用表单标记包装它，但这是不必要的。

当链接另一个本地文件时，只需将其放在同一个文件夹中，并添加文件名作为引用。或者指定文件的位置(如果in不在同一文件夹中)。

1	<button>Next</button>

这也不会在URL的末尾添加任何字符，但是在以文件名结尾之前，它将文件项目路径作为URL。例如

如果我的项目结构是…

…表示文件夹-表示文件而four表示父文件夹中的子目录或文件

公众HTML||||||||-主.html||||||||-辅助.html

如果我打开main.html，URL将是，

1	http://localhost:0000/public/html/main.html?_ijt=i7ms4v9oa7blahblahblah

但是，当我单击main.html中的按钮更改为secondary.html时，URL将为，

1	http://localhost:0000/public/html/secondary.html

URL末尾不包含特殊字符。我希望这有帮助。顺便说一句，(%20表示一个URL中的一个空格，它被编码并插入其中。)

注意：localhost:0000显然不是0000，您在那里有自己的端口号。

而且呢？_ ijt=x x x x x x x x x x x在main.html URL的末尾，x是由您自己的连接决定的，所以显然不等于我的。

我似乎在陈述一些基本的观点，但我只想尽我所能地解释清楚。谢谢你的阅读，我希望这至少能帮助到某人。编程愉快。

唯一的方法就是这样做(除了俾路支巧妙的形式思想！)是通过在按钮中添加一个javascript onclick事件，这不利于访问。

你考虑过把一个普通的链接设计成一个按钮吗？你不能用这种方式实现特定于操作系统的按钮，但这仍然是IMO的最佳方式。

相关讨论

与其他一些人添加的内容一样，您可以随意使用一个没有PHP、jquery代码、简单HTML和CSS的简单CSS类。

创建一个CSS类并将其添加到锚中。代码如下。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

.button-link {
height:60px;
padding: 10px 15px;
background: #4479BA;
color: #FFF;
-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);
}
.button-link:hover {
background: #356094;
border: solid 1px #2A4E77;
text-decoration: none;
}

<HTML>
<a class="button-link" href="http://www.go-some-where.com"
target="_blank">Press Here to Go

就是这样。这很容易做到，让你想做什么就做什么。您可以控制颜色、大小、形状(半径)等。有关详细信息，请参阅我在其上找到的网站。

@Nicolas，因为你的没有type="button"，所以下面为我工作，因为它开始表现为提交类型……因为我已经有一个提交类型。它不适用于我……现在你可以将类添加到按钮或以获得所需的布局：

1	<button type="button">Click here</button>

如果您想避免使用窗体或输入，并且要查找一个看起来像按钮的链接，那么可以使用DIV包装器、锚和h1标记创建好看的按钮链接。您可能需要这样做，这样您就可以在页面周围自由地放置链接按钮。这对于水平居中按钮特别有用，并且其中有垂直居中的文本。以下是如何：

按钮将由三个嵌套部分组成：一个DIV包装器、一个锚和一个h1，如下所示：

Button!

然后在CSS中，您的样式应该如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

.link-button-wrapper {
width: 200px;
height: 40px;
box-shadow: inset 0px 1px 0px 0px #ffffff;
border-radius: 4px;
background-color: #097BC0;
box-shadow: 0px 2px 4px gray;
display: block;
border:1px solid #094BC0;
}
.link-button-wrapper > a {
display: inline-table;
cursor: pointer;
text-decoration: none;
height: 100%;
width:100%;
}
.link-button-wrapper > a > h1 {
margin: 0 auto;
display: table-cell;
vertical-align: middle;
color: #f7f8f8;
font-size: 18px;
font-family: cabinregular;
text-align: center;
}

这里有一个jsiddle来检查它，并在它周围玩耍。

此设置的好处：1。使DIV包装显示：块易于居中(使用边距：0自动)和位置(而一个是内联的，更难定位，不可能居中)。

您只需制作显示：块，移动它，并将其设置为按钮样式，但是在它内部垂直对齐文本会变得困难。

这允许您创建display:inline table和display:table单元格，该单元格允许您使用垂直对齐：中间对齐，并垂直居中(在按钮上总是很好)。是的，您可以使用填充，但是如果您希望按钮动态调整大小，那就没有那么干净了。

有时，当您在一个DIV中嵌入一个时，只有文本是可点击的，这个设置使得整个按钮是可点击的。

如果你只是想移到另一个页面，就不必处理表单。表单是用来输入信息的，应该为此保留。

允许您将按钮样式和文本样式彼此完全分离(Stretch Advantage？当然可以，但是CSS会变得很难看，所以分解它很好)。

它确实让我的生活更容易设计一个移动网站的可变大小的屏幕。

相关讨论

另一个选项是在按钮中创建链接：

1	<button type="button">Link link</button>

然后使用CSS设置链接和按钮的样式，以便链接占用按钮内的整个空间(这样用户就不会错过单击)：

1 2	button, button a{position:relative;} button a{top:0;left:0;bottom:0;right:0;}

我在这里创建了一个演示。

相关讨论

如果要创建一个用于任何位置的URL的按钮，请为锚创建一个按钮类。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

a.button {
background-color: #999999;
color: #FFFFFF !important;
cursor: pointer;
display: inline-block;
font-weight: bold;
padding: 5px 8px;
text-align: center;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.button:hover {
text-decoration: none;
}

我知道已经提交了很多答案，但似乎没有一个能真正解决这个问题。以下是我的解决方案：

使用op开始使用的
方法。这确实很好，但有时它会在URL上附加一个?。主要问题是?。

当启用javascript时，使用jquery/javascript进行链接跟踪，以便?不会附加到URL。对于那些没有启用javascript的用户来说，它将无缝地返回到
方法。

javascript代码使用事件委托，因此您可以在
或

javascript代码防止发生默认操作，然后跟踪
action属性中给定的链接。

jsbin示例(代码段不能跟踪链接)

1
2
3
4
5
6
7
8
9

// Listen for any clicks on an element in the document with the `link` class
$(document).on('click', '.link', function(e) {
// Prevent the default action (e.g. submit the form)
e.preventDefault();

// Get the URL specified in the form
var url = e.target.parentElement.action;
window.location = url;
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<!DOCTYPE html>
<html>

<head>
<script src="https://code.jquery.com/jquery-1.11.1.min.js">
<meta charset="utf-8">
Form buttons as links
</head>

<body>

<form method="get" action="http://stackoverflow.com/questions/2906582/how-to-create-an-html-button-that-acts-like-a-link">

<button type="submit" class="link">Link</button>
</form>
</body>

</html>

用于HTML 5和样式按钮以及图像背景

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

相关讨论

也可以使用按钮：

例如，在ASP.NET核心语法中：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

// Some other tags
<form method="post">
<input asp-for="YourModelPropertyOrYourMethodInputName"
value="@TheValue" type="hidden" />
<button type="submit" class="link-button" formaction="/TheDestinationController/TheDestinationActionMethod">
@(TextValue)
</button>
</form>
// Other tags...

<style>
.link-button {
background: none !important;
border: none;
padding: 0 !important;
color: #20a8d8;
cursor: pointer;
}
</style>

我把它用在了一个我目前正在工作的网站上，效果很好！如果你也想要一些很酷的样式，我会把CSS放在这里。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

input[type="submit"] {
background-color: white;
width: 200px;
border: 3px solid #c9c9c9;
font-size: 24pt;
margin: 5px;
color: #969696;
}

input[type="submit"]:hover {
color: white;
background-color: #969696;
transition: color 0.2s 0.05s ease;
transition: background-color 0.2s 0.05s ease;
cursor: pointer;
}

1	<input type="submit" name="submit" onClick="window.location= 'http://example.com'">

在这里工作。

7种方法：

使用window.location.href = 'URL'。

使用window.location.replace('URL')。

使用window.location = 'URL'。

使用window.open('URL')。

使用window.location.assign('URL')。

使用HTML表单

使用HTML定位标记

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

<button onclick='window.location.href="https://stackoverflow.com"'>
Click Me
</button>


<button onclick='window.location.replace("https://stackoverflow.com")'>
Click Me
</button>


<button onclick='window.location ="https://stackoverflow.com"'>
Click Me
</button>


<button onclick='window.open("https://stackoverflow.com","_self","","")'>
Click Me
</button>


<button onclick='window.location.assign("http://www.stackoverflow.com")'>
Click Me
</button>


<form action='https://stackoverflow.com' method='get'>
<input type='submit' value='Click Me'/>
</form>



<button>Click Me</button>

使用上的属性回答问题的人很有帮助。

但最近，当我在

中使用链接时遇到了一个问题。

该按钮现在被视为提交按钮(HTML5)。我已经尝试了一种方法，并且找到了这个方法。

创建一个CSS样式按钮，如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

.btn-style{
border : solid 1px #0088cc;
border-radius : 6px;
moz-border-radius : 6px;
-webkit-box-shadow : 0px 0px 2px rgba(0,0,0,1.0);
-moz-box-shadow : 0px 0px 2px rgba(0,0,0,1.0);
box-shadow : 0px 0px 2px rgba(0,0,0,1.0);
font-size : 18px;
color : #696869;
padding : 1px 17px;
background : #eeeeee;
background : -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(49%,#eeeeee), color-stop(72%,#cccccc), color-stop(100%,#eeeeee));
background : -moz-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
background : -webkit-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
background : -o-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
background : -ms-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
background : linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
filter : progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#eeeeee',GradientType=0 );

}

或者在这里创建一个新的：css按钮生成器

然后用一个以所做的CSS样式命名的类标记创建链接：

Link

这是一把小提琴：

JS小提琴

相关讨论

您还可以将按钮type-property设置为"按钮"(使其不提交表单)，然后将其嵌套在链接中(使其重定向用户)。

这样，您可以在同一表单中使用另一个按钮来提交表单，以备需要。我也认为在大多数情况下，这比将表单方法和操作设置为链接更可取(除非它是搜索表单，我猜…)

例子：

1
2
3
4
5

<form method="POST" action="/SomePath">
<input type="text" name="somefield" />
<button type="button">Go to Target!</button>
<button type="submit">submit form</button>
</form>

这样，第一个按钮重定向用户，而第二个按钮提交表单。

注意确保按钮不会触发任何操作，因为这将导致冲突。同样正如艾利乌所指出的，你应该知道，由于上述原因，根据标准，严格来说，这并不是有效的HTML。不过，它在Firefox和Chrome中确实如预期般工作，但我还没有在Internet Explorer中测试过它。

相关讨论

您可以使用javascript：

1
2
3
4
5
6

<html>
<button onclick='window.location ="http://www.google.com"'>
Google
</button>

</html>

将http://www.google.com替换为您的网站，确保在URL之前包含http://。

在JavaScript中

1
2
3

setLocation(base: string) {
window.location.href = base;
}

在HTML中

1	<button onclick="setLocation('/<whatever>')>GO</button>"

如果你想重定向你网站上的网页，那么这里是我的方法-我已经将属性href添加到按钮中，然后onclick将此.getattribute('href')分配给document.location.href。

**如果您引用的URL超出了您的域，这将不起作用，因为"x-frame-options"指向"sameorigin"。

样例代码：

1	<button onclick="document.location.href=this.getAttribute('href');" href="/">Home</button>

如果你需要的是它看起来像一个按钮，强调梯度图像，你可以这样做：

1	<i class="fa fa-home"> Button Text