如何创建像链接一样的HTML按钮?因此,单击该按钮可将用户重定向到页面。
我希望它是可访问的,并且在URL中使用最少的额外字符或参数。
如何创建像链接一样的HTML按钮?因此,单击该按钮可将用户重定向到页面。
我希望它是可访问的,并且在URL中使用最少的额外字符或参数。
当前回答
实现这一点的唯一方法(除了BalusC巧妙的表单想法!)是向按钮添加JavaScript onclick事件,这对可访问性不利。
您是否考虑过将普通链接设置为按钮样式?你不能用这种方式实现特定于操作系统的按钮,但这仍然是最好的IMO方式。
其他回答
对于HTML 5和带有图像背景的样式按钮
<a id=“Navigate”href=“http://www.google.com"><输入type=“按钮”id=“导航按钮”style=“背景图像:url(http://cdn3.blogsdna.com/wp-content/uploads/2010/03/Windows-Phone-7-Series-Icons-Pack.png);背景重复:无重复;背景位置:-272px-112px;光标:指针;高度:40px;宽度:40px;边框半径:26px;边框样式:实心;边框颜色:#000;边框宽度:3px;“title=”导航“/></a>
如果要创建用于URL的按钮,请为锚点创建按钮类。
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;
}
这里的所有解决方案都不适合我,所以在尝试了所有解决方案之后,我得到了一些微不足道的东西:仅HTML(无表单提交),无CSS,无JS:
<a href="/link"><button>Link</button></a>
如果您使用的是CSS库或主题,只需将按钮的类应用于锚/链接标记即可。
以下是一个UI示例:
<a class="btn-block-option" href="">
<i class="si si-reload"></i>
</a>
HTML
简单的HTML方式是将其放在一个<form>中,其中在action属性中指定所需的目标URL。
<form action="https://google.com">
<input type="submit" value="Go to Google" />
</form>
如果需要,设置CSS显示:inline;以使其与周围文本保持一致。您也可以使用<button type=“submit”>来代替上面示例中的<input type=“提交”>。唯一的区别是<button>元素允许子级。
您可以直观地期望能够使用<button href=“https://google.com“>类似于<a>元素,但不幸的是,根据HTML规范,该属性不存在。
CSS
如果允许使用CSS,只需使用一个<a>,您可以使用外观属性(这在Internet Explorer中仅不受支持)将其设置为类似按钮。
<a href="https://google.com" class="button">Go to Google</a>
a.button {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
text-decoration: none;
color: initial;
}
或者从众多CSS库中选择一个,比如Bootstrap。
<a href="https://google.com" class="btn btn-primary">Go to Google</a>
JavaScript
如果允许JavaScript,请设置window.location.href。
<input type="button" onclick="location.href='https://google.com';" value="Go to Google" />
您也可以使用<button>来代替上面示例中的<input type=“button”>。唯一的区别是<button>元素允许子级。