如何创build一个像链接一样的HTMLbutton？

我想创build一个HTMLbutton，就像一个链接。 所以，当你点击button，它redirect到一个页面。 我希望它尽可能地被访问。

我也喜欢它，所以URL中没有任何额外的字符或参数。

我怎样才能做到这一点？

---

根据迄今发布的答案，我目前正在这样做：

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

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

还有两个解决scheme可以做到这一点：使用JavaScript或样式链接看起来像一个button。

使用JavaScript：

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

但是，这显然需要JavaScript，因此屏幕阅读器不太易于使用。 链接的一点是转到另一页。 所以试图让一个button像一个链接是错误的解决scheme。 我的build议是，你应该使用一个链接，并把它看起来像一个button 。

 <a href="/link/to/page2">Continue</a> 

Answer 1

HTML

纯HTML方法是把它放在一个<form>中，在action属性中指定所需的目标URL。

 <form action="http://google.com"> <input type="submit" value="Go to Google" /> </form> 

如有必要，请设置CSS display: inline; 在forms上保持与周围文本的stream动。 在上面的例子中，你也可以使用<button type="submit">代替<input type="submit"> <button type="submit"> 。 唯一的区别是<button>元素允许孩子。

你可以直观地预期能够使用类似于<a>元素的<button href="http://google.com"> ，但不幸的是，根据HTML规范 ，这个属性不存在。

CSS

如果允许使用CSS，只需使用样式为<a>外观类似button的appearance属性（ 目前只有Internet Explorer支持（2015年7月）仍然很差 ）。

 <a href="http://google.com" class="button">Go to Google</a> 

 a.button { -webkit-appearance: button; -moz-appearance: button; appearance: button; text-decoration: none; color: initial; } 

或者select一个像Bootstrap这样的CSS库。

 <a href="http://google.com" class="btn btn-default">Go to Google</a> 

JavaScript的

如果允许JavaScript，请设置window.location.href 。

 <input type="button" onclick="location.href='http://google.com';" value="Go to Google" /> 

Answer 2

如果是在基本的HTML定位标记中查找的button的外观，那么可以使用Twitter Bootstrap框架将以下任何常见的HTMLtypes链接/button设置为buttonforms。 请注意框架版本2,3或4之间的视觉差异：

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

Bootstrap（v4）样例外观：

Bootstrap（v3）示例外观：

Bootstrap（v2）示例外观：

Answer 3

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

Answer 4

使用：

 <a href="http://www.stackoverflow.com/"> <button>Click me</button> </a> 

不幸的是，这个标记在HTML5中不再有效，既不会validation，也不会像预期的那样工作。 使用另一种方法。

Answer 5

从HTML5开始，button支持formaction属性。 最重要的是，不需要Javascript或者诡计。

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

注意事项

• 必须由<form>标签包围。
• <button>types必须是“提交”（或未指定），我不能使用types“button”。 下面提到点。
• 覆盖表单中的默认操作。 换句话说，如果你在另外一个表单中这样做，就会导致冲突。

参考： https ： //developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formaction浏览器支持： https ： //developer.mozilla.org/en-US/docs/Web/ HTML /元/button＃Browser_compatibility

Answer 6

这实际上很简单，没有使用任何forms元素。 你可以在里面用一个button来使用<a>标签。

喜欢这个：

 <a href="http://www.google.com" target="_parent"><button>Click me !</button></a> 

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

Answer 7

如果您使用的是内部表单，请将属性type =“reset”与button元素一起添加。 这将阻止forms的行动。

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

Answer 8

 <form> <input TYPE="button" VALUE="Home Page" onclick="window.location.href='http://www.wherever.com'"> </form> 

Answer 9

有什么缺点做下面的事情吗？

 <a class='nostyle' href='http://www.google.com/'> <span class='button'>Schedule</span> </a> 

其中a.nostyle是一个具有链接样式的类（可以摆脱标准链接样式）， span.button是一个具有“button”样式（背景，边框，渐变等）的类。 。

Answer 10

唯一的方法就是这样做（除了BalusC的巧妙forms的想法！）是通过添加一个JavaScript onclick事件到button，这是不好的可访问性。

你有没有考虑像一个button样式的正常链接？ 你不能以这种方式实现操作系统特定的button，但它仍然是IMO的最佳方式。

Answer 11

你可以简单地在元素周围添加一个标签：

 <a href="http://google.com" target="_blank"> <button>My Button</button> </a> 

https://jsfiddle.net/hj6gob8b/

Answer 12

和其他一些人一样，只要使用一个简单的CSS类，没有PHP，没有jQuery代码，只需简单的HTML和CSS，就可以疯狂起来。

创build一个CSS类并将其添加到您的锚点。 代码如下。

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

这就对了。 这很容易做，让你像你想要的一样有创意。 您可以控制颜色，大小，形状（半径）等。有关更多详细信息，请参阅我find的网站 。

Answer 13

这个问题似乎有三个解决scheme（都有利弊）。

解决scheme1：表单中的button。

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

但问题是，在一些stream行的浏览器，如Chrome浏览器，Safari浏览器和Internet Explorer中，它会在URL的末尾添加一个问号字符。 换句话说，上面的URL代码最终会看起来像这样：

 http://someserver/pages2? 

有一种方法可以解决这个问题，但是这需要服务器端的configuration。 使用Apache Mod_rewrite的一个例子是将所有请求redirect到尾部? 到他们相应的URL没有? 。 这是一个使用.htaccess的例子，但是这里有一个完整的线程：

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

类似的configuration可以根据所使用的networking服务器和堆栈而变化。 所以这种方法的总结：

优点：

1. 这是一个真正的button，在语义上它是有道理的。
2. 由于它是一个真正的button，它也会像一个真正的button一样（例如，在活动时按空格键时可拖动的行为和/或模仿点击）。
3. 没有JavaScript，没有复杂的风格要求。

缺点：

1. 跟踪? 在一些浏览器中看起来很丑。 这可以通过使用POST而不是GET来解决（在某些情况下），但干净的方法是有一个服务器端redirect。 服务器端redirect的不利之处在于，由于304的redirect，会导致对这些链接进行额外的HTTP调用。
2. 添加额外的<form>元素
3. 使用多种表单时的元素定位可能会非常棘手，在处理响应式devise时会变得更糟。 根据元素的顺序，使用此解决scheme可能无法实现某些布局。 如果devise受到这个挑战的影响，这最终会影响可用性。

解决scheme2：使用JavaScript。

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

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

优点：

1. 简单（基本要求），并保持语义，而不需要额外的forms。
2. 由于它是一个真正的button，它也会像一个真正的button一样（例如，在活动时按空格键时可拖动的行为和/或模仿点击）。

缺点：

1. 需要JavaScript，这意味着较难访问。 这对于诸如链接之类的基本（核心）元素来说并不理想。

解决scheme3：锚（链接）像一个button样式。

样式链接像一个button是相对容易的，并可以提供不同的浏览器类似的经验。 Bootstrap这样做，但它也很容易使用简单的样式自己实现。

优点：

1. 简单（基本要求）和良好的跨浏览器支持。
2. 不需要一个<form>工作。
3. 不需要JavaScript来工作。

缺点：

1. 语义是有点破的，因为你需要一个button，就像一个链接，而不是一个button的行为。
2. 它不会重现解决scheme＃1的所有行为。 它不会支持与button相同的行为。 例如，拖动时链接反应不同。 如果没有额外的JavaScript代码，“空格键”链接触发器也不能工作。 这会增加很多复杂性，因为浏览器在button上支持keypress事件的方式不一致。

结论

解决scheme＃1（ 表单中的button ）对于用户而言是最为透明的，只需要最less的工作。 如果你的布局不受这个select的影响，并且服务器端的调整是可行的，那么对于可访问性是最优先的（例如错误页面上的链接或错误消息）的情况，这是一个好的select。

如果JavaScript不妨碍您的可访问性要求，那么解决scheme＃2（ JavaScript ）将优先于＃1和＃3。

如果由于某种原因，可访问性是至关重要的（JavaScript不是一种select），但是您处于devise和/或服务器configuration阻止您使用选项＃1，然后是解决scheme＃3（ 锚定样式像一个button ）是一个很好的select，用最小的可用性影响来解决这个问题。

Answer 14

另一个选项是在button中创build一个链接：

 <button type="button"><a href="yourlink.com">Link link</a></button> 

然后使用CSS来设置链接和button的样式，以便链接占据button内的整个空间（所以用户不会错过任何一个button）：

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

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

Answer 15

如果你想避免使用一个表单或input，你正在寻找一个button的链接，你可以创build一个div包装，一个锚点和一个h1标签看起来好看的button链接。 你可能想要这个，所以你可以自由地将链接button放在你的页面上。 这对于水平居中的button以及垂直居中的文本是特别有用的。 就是这样：

你的button将由三个嵌套部分组成：一个div包装器，一个锚点和一个h1，如下所示：

 <div class="link-button-wrapper"> <a href="your/link/here"> <h1>Button!</h1> </a> </div> 

然后在CSS中，你的样式应该是这样的：

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

这里有一个jsFiddle检查出来，并玩它。

此设置的好处：1.使div包装显示：块使得容易居中（使用边距：0自动）和位置（而<a>是内联和更难以定位，不可能居中）。

2. 你可以使<a> display：block，移动它，并将其设置为一个button，但是垂直alignment它内部的文本变得困难。

3. 这允许你制作<a> display：inline-table和<h1> display：table-cell，它允许你在<h1>上使用vertical-align：middle并垂直居中（这总是很好的一个button）。 是的，你可以使用填充，但如果你想让你的buttondynamicresize，那就不会那么干净。

4. 有时当你在div中embedded<a>时，只有文本是可点击的，这个设置使得整个button可以点击。

5. 如果你只是想移动到另一个页面，你不必处理表单。 表单是用于input信息的，它们应该保留。

6. 允许你干净的button样式和文本样式彼此（拉伸优势？当然，但CSS可以看起来很讨厌，所以它是很好的分解它）。

这绝对让我的生活更容易造型为可变大小的屏幕移动网站。

Answer 16

如果您想创build一个用于任何地方的URL的button，请为锚点创build一个button类。

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

Answer 17

@尼古拉斯，下面为我工作，因为你没有type="button"因为它开始performance为提交types..因为我已经有一个提交type.it没有为我工作….现在你可以添加类到button或<a>以获得所需的布局：

 <a href="http://www.google.com/"> <button type="button">Click here</button> </a> 

Answer 18

对于HTML 5和样式的button以及图像背景

 <a id="Navigate" href="http://www.google.com"> <input type="button" id="NavigateButton" style=" background-image: url(http://cdn3.blogsdna.com/wp-content/uploads/2010/03/Windows-Phone-7-Series-Icons-Pack.png); background-repeat: no-repeat; background-position: -272px -112px; cursor:pointer; height: 40px; width: 40px; border-radius: 26px; border-style: solid; border-color:#000; border-width: 3px;" title="Navigate" /> </a> 

Answer 19

我知道已经提交了很多答案，但是他们中没有一个似乎确实认真对待了这个问题。 这是我的解决scheme：

1. 使用OP开始的<form method="get">方法。 这工作真的很好，但它有时附加一个? 到url。 这个? 是主要的问题。
2. 当JavaScript被启用时，使用jQuery / JavaScript做下面的链接? 最终不会追加到URL。 对于那些没有启用JavaScript的用户来说，它会无缝地回退到<form>方法。
3. JavaScript代码使用事件委托，所以您甚至可以在<form>或<button>之前附加事件侦听器。 在这个例子中，我使用jQuery，因为它很快捷，但也可以在“vanilla”JavaScript中完成。
4. JavaScript代码可防止发生默认操作，然后遵循<form> action属性中给出的链接。

JSBin示例（代码段不能跟随链接）

 // Listen for any clicks on an element in the document with the `link` class $(document).on('click', '.link', function(e) { // Prevent the default action (eg submit the form) e.preventDefault(); // Get the URL specified in the form var url = e.target.parentElement.action; window.location = url; }); 

 <!DOCTYPE html> <html> <head> <script src="jquery-1.11.1.min.js"></script> <meta charset="utf-8"> <title>Form buttons as links</title> </head> <body> <!-- Set `action` to the URL you want the button to go to --> <form method="get" action="http://stackoverflow.com/questions/2906582/how-to-create-an-html-button-that-acts-like-a-link"> <!-- Add the class `link` to the button for the event listener --> <button type="submit" class="link">Link</button> </form> </body> </html> 

Answer 20

关于BalusC的答复 ，

 <form action="http://google.com"> <input type="submit" value="Go to Google"> </form> 

我需要添加variables到button，不知道如何。 我结束了使用inputtypes隐藏 。 我认为这可能有助于像我这样find这个页面的其他人。

Answer 21

在button标签中使用它作为data-href="index.html" 。

Answer 22

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

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

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

在这里工作JSFiddle

Answer 23

在<button></button>上使用<a></a>属性回答的人很有帮助。

但是最近，当我在<form></form>使用链接时，遇到了一个问题。

该button现在被认为是/作为提交button（HTML5）。 我尝试了一下，find了这个方法。

创build一个如下所示的CSS样式button：

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

或者在这里创build一个新的： CSSbutton生成器

然后创build一个以你创build的CSS样式命名的类标签的链接：

 <a href='link.php' class='btn-style'>Link</a> 

这是一个小提琴：

JS小提琴

Answer 24

你也可以将button的type-property为“button”（它使得它不会提交表单），然后将它嵌套在一个链接（使其redirect用户）中。

这样，您可以在提交表单的同一表单中另外添加一个button，以备需要时使用。 我也认为这在大多数情况下比将表单方法和动作设置为链接更好（除非它是searchforms，我猜…）

例：

 <form method="POST" action="/SomePath"> <input type="text" name="somefield"/> <a href="www.target.com"><button type="button">Go to Target!</button></a> <button type="submit">submit form</button> </form> 

这样第一个buttonredirect用户，而第二个提交表单。

小心确保button不会触发任何操作，因为这会导致冲突。 也正如Arius指出的那样，您应该意识到，出于上述原因，根据标准，这并不是严格意义上的有效HTML。 然而，它在Firefox和Chrome中仍然可以正常工作，但是我还没有对Internet Explorer进行testing。

Answer 25

Also you can use a button:

For example, in ASP.NET Core syntax :

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

Answer 26

If what you need is that it will look like a button, with emphasis on the gradient image , you can do this:

 <a href="www.yourlink.com" class="btn btn-gradient"><i class="fa fa-home"> Button Text</i></a>