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

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


当前回答

如果您在基本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)示例外观:

其他回答

它实际上非常简单,不使用任何表单元素。您可以只使用<a>标签,里面有一个按钮:)。

这样地:

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

它会将href加载到同一页面中。想要新页面吗?只需使用target=“_blank”。

EDIT

几年后,虽然我的解决方案仍然有效,但请记住,您可以使用大量CSS来使它看起来像您想要的那样。这只是一条捷径。

如果您在基本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)示例外观:

Use:

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

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

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

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

七种方法:

使用window.location.href='URL'使用window.location.replace('URL')使用window.location=“URL”使用window.open(“URL”)使用window.location.assign('URL')使用HTML表单使用HTML定位标记

<!-- 使用window.location.href='URL'--><button onclick='window.location.href=“https://stackoverflow.com"'>单击我</按钮><!-- 使用window.location.replace('URL')--><button onclick='窗口位置替换(“https://stackoverflow.com")'>单击我</按钮><!-- 使用window.location=“URL”--><button onclick='window.location=“https://stackoverflow.com"'>单击我</按钮><!-- 使用window.open('URL')--><button onclick='窗口打开(“https://stackoverflow.com“,”_self“,”“,”)'>单击我</按钮><!-- 使用window.location.assign('URL')--><button onclick='窗口位置分配(“http://www.stackoverflow.com")'>单击我</按钮><!-- 使用HTML表单--><表单操作='https://stackoverflow.com'方法='get'><input-type='submit'value='Click-Me'/></form><!-- 使用HTML定位标记--><a href='https://stackoverflow.com'><button>单击我</button></a>