如何创建像链接一样的HTML按钮?因此,单击该按钮可将用户重定向到页面。

我希望它是可访问的,并且在URL中使用最少的额外字符或参数。


当前回答

从HTML5开始,按钮支持formaction属性。最重要的是,不需要JavaScript或诡计。

<表单><button formaction=“http://stackoverflow.com“>转到堆栈溢出!</button></form>

注意事项

必须由<form>标记包围。<button>类型必须是“submit”(或未指定)-我无法使用“button”类型。这引出了以下问题。重写表单中的默认操作。换句话说,如果在另一个表单中执行此操作,将导致冲突。

参考:formaction

浏览器支持:<button>:button元素

其他回答

如果您在基本HTML锚标记中查找的是按钮的视觉外观,那么您可以使用Twitter Bootstrap框架将以下任何常见HTML类型的链接/按钮格式化为按钮。请注意框架版本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">

引导(v4)示例外观:

引导(v3)示例外观:

引导(v2)示例外观:

如果您使用的是SSL证书:

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

我在一个我目前正在开发的网站上使用了这个,效果很好!如果你也想要一些很酷的样式,我会把CSS放在这里。

输入[类型=“提交”]{背景色:白色;宽度:200px;边框:3px实心#c9c9c9;字体大小:24pt;边距:5px;颜色:#969696;}input[type=“submit”]:悬停{颜色:白色;背景色:#969696;过渡:颜色0.2s 0.05s容易;过渡:背景色0.2s 0.05s轻松;光标:指针;}<input type=“submit”name=“submit”onClick=“window.location=”http://example.com'">

一个正在工作的JSFiddle在这里。

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

实现这一点的唯一方法(除了BalusC巧妙的表单想法!)是向按钮添加JavaScript onclick事件,这对可访问性不利。

您是否考虑过将普通链接设置为按钮样式?你不能用这种方式实现特定于操作系统的按钮,但这仍然是最好的IMO方式。