如何创建像链接一样的HTML按钮？

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

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

当前回答

Bootstrap方法也适用于Bulma。

2021-09-22 19:42:43

其他回答

如果要创建用于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;
}

2013-11-15 17:34:17

在<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公司

2014-07-23 08:50:29

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

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

注意事项

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

参考：formaction

浏览器支持：＜button＞：button元素

2015-07-02 19:03:46

您可以使用JavaScript：

代替http://www.google.com并确保在URL之前包含http://。

2019-02-25 18:51:38

如果你需要的是它看起来像一个按钮，重点放在渐变图像上，你可以这样做：

<a href="www.yourlink.com" class="btn btn-gradient"><i class="fa fa-home"> Button Text</i></a>

2014-11-09 15:42:15

如何创建像链接一样的HTML按钮？

推荐文章

最新文章

标签