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

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


当前回答

Bootstrap方法也适用于Bulma。

<link rel=“stylesheet”href=“https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.min.css“><a href=“https://www.stackoverflow.com“class=”button is primary“>堆栈溢出</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在这里。

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

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

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

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

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

注意事项

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

参考:formaction

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

只需将按钮放在参考标签内。,

<a href="https://www.google.com/"><button>Next</button></a>

这似乎非常适合我,并且没有添加任何%20标签到链接中,只是你想要的。我使用了一个到谷歌的链接来演示。

当然,您可以将其包装在表单标记中,但这不是必需的。

当链接另一个本地文件时,只需将其放在同一文件夹中并添加文件名作为引用即可。如果不在同一文件夹中,请指定文件的位置。

<a href="myOtherFile"><button>Next</button></a>

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

如果我的项目结构是。。。

..表示文件夹\

表示文件而四|表示父文件夹中的子目录或文件

平民的|||| ..html格式|||||||-main.html|||||||-ssecondary.html

如果我打开main.html文件,

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

然而,当我单击main.html中的按钮以更改为secondary.html时,URL将是,

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

URL末尾不包含特殊字符。

顺便说一句-(%20表示URL中的一个空格,它编码并插入到它们的位置。)

注意:localhost:0000显然不是0000。您将有自己的端口号。

此外_ijt=xxxxxxxxxxxxxx在main.html URL的末尾,x由您自己的连接决定,因此显然它不等于我的连接。

我似乎在陈述一些非常基本的观点,但我只想尽可能地解释清楚。