如何创建像链接一样的HTML按钮?因此,单击该按钮可将用户重定向到页面。
我希望它是可访问的,并且在URL中使用最少的额外字符或参数。
如何创建像链接一样的HTML按钮?因此,单击该按钮可将用户重定向到页面。
我希望它是可访问的,并且在URL中使用最少的额外字符或参数。
当前回答
Use:
<a href="http://www.stackoverflow.com/">
<button>Click me</button>
</a>
不幸的是,这种标记在HTML5中不再有效,既不能验证,也不能始终按预期工作。使用另一种方法。
其他回答
七种方法:
使用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>
对于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>
实现这一点的唯一方法(除了BalusC巧妙的表单想法!)是向按钮添加JavaScript onclick事件,这对可访问性不利。
您是否考虑过将普通链接设置为按钮样式?你不能用这种方式实现特定于操作系统的按钮,但这仍然是最好的IMO方式。
随着其他一些人的添加,您可以使用一个简单的CSS类,不使用PHP,不使用jQuery代码,只使用简单的HTML和CSS。
创建一个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>
就是这样。这很容易做到,让你随心所欲地发挥创造力。您可以控制颜色、大小、形状(半径)等。有关详细信息,请参阅我在网站上找到的。
<button onclick=“location.href='http://www.example.com'“type=”按钮“>www.example.com</button>
请注意,type=“button”属性很重要,因为它缺少的默认值是SubmitButton状态。