如何创建像链接一样的HTML按钮?因此,单击该按钮可将用户重定向到页面。
我希望它是可访问的,并且在URL中使用最少的额外字符或参数。
如何创建像链接一样的HTML按钮?因此,单击该按钮可将用户重定向到页面。
我希望它是可访问的,并且在URL中使用最少的额外字符或参数。
当前回答
您可以简单地在元素周围放置标记:
<a href="http://google.com" target="_blank">
<button>My Button</button>
</a>
https://jsfiddle.net/hj6gob8b/
其他回答
它实际上非常简单,不使用任何表单元素。您可以只使用<a>标签,里面有一个按钮:)。
这样地:
<a href="http://www.google.com" target="_parent"><button>Click me !</button></a>
它会将href加载到同一页面中。想要新页面吗?只需使用target=“_blank”。
EDIT
几年后,虽然我的解决方案仍然有效,但请记住,您可以使用大量CSS来使它看起来像您想要的那样。这只是一条捷径。
在JavaScript中
setLocation(base: string) {
window.location.href = base;
}
HTML格式
<button onclick="setLocation('/<whatever>')>GO</button>"
在<button></button>上使用<a></a>属性回答的人很有帮助。
但最近,我在<form></form>中使用链接时遇到了一个问题。
该按钮现在被视为提交按钮(HTML5)。我已经尝试了一种方法,并找到了这种方法。
创建一个CSS样式按钮,如下所示:
.btn-style {
border: solid 1px #0088cc;
border-radius: 6px;
moz-border-radius: 6px;
-webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 1.0);
-moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 1.0);
box-shadow: 0px 0px 2px rgba(0, 0, 0, 1.0);
font-size: 18px;
color: #696869;
padding: 1px 17px;
background: #eeeeee;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(49%, #eeeeee), color-stop(72%, #cccccc), color-stop(100%, #eeeeee));
background: -moz-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
background: -webkit-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
background: -o-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
background: -ms-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
background: linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#eeeeee', GradientType=0);
}
或者在这里创建一个新的:CSS按钮生成器
然后用一个以您所创建的CSS样式命名的类标记创建链接:
<a href='link.php' class='btn-style'>Link</a>
这是一把小提琴:
JSFiddle公司
如果您在基本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)示例外观:
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>元素允许子级。