如何创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> 

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

如果是在基本的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)样例外观:

Boostrap v4按钮的示例输出

Bootstrap(v3)示例外观:

Boostrap v3按钮的输出示例

Bootstrap(v2)示例外观:

Boostrap v2按钮的示例输出

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

使用:

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

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

从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

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

喜欢这个:

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

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

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

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

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

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

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

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

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

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

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

https://jsfiddle.net/hj6gob8b/

和其他一些人一样,只要使用一个简单的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的网站 。

这个问题似乎有三个解决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,用最小的可用性影响来解决这个问题。

另一个选项是在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了一个演示 。

如果你想避免使用一个表单或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>是内联和更难以定位,不可能居中)。

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

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

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

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

  5. 允许你干净的button样式和文本样式彼此(拉伸优势?当然,但CSS可以看起来很讨厌,所以它是很好的分解它)。

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

如果您想创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; } 

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

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

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

我知道已经提交了很多答案,但是他们中没有一个似乎确实认真对待了这个问题。 这是我的解决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="https://code.jquery.com/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> 

关于BalusC的答复 ,

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

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

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

  <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

<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小提琴

你也可以将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。

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> 

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>