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

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

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

当前回答

您还可以将buttons类型属性设置为“button”（它使其不提交表单），然后将其嵌套在链接中（使其重定向用户）。

这样，如果需要，您可以在同一表单中有另一个按钮来提交表单。我还认为，在大多数情况下，这比将表单方法和动作设置为链接更可取（除非我猜是搜索表单…）

例子：

这样，第一个按钮重定向用户，而第二个按钮提交表单。

小心确保按钮不会触发任何动作，否则会导致冲突。同样，正如Arius所指出的，您应该意识到，出于上述原因，根据标准，严格来说，这并不是有效的HTML。不过，它在Firefox和Chrome中确实可以正常工作，但我还没有在Internet Explorer中测试过它。

2014-12-10 15:21:15

其他回答

对于Nicolas的回答，以下内容对我有用，因为该回答没有type=“button”，因此它开始表现为提交类型。。。因为我已经有一个提交类型。这对我不起作用。。。现在，您可以向按钮或＜a＞添加一个类以获得所需的布局：

<a href="http://www.google.com/">
    <button type="button">Click here</button>
</a>

2017-07-21 05:59:07

HTML回答：如果您想创建一个HTML按钮，该按钮的作用类似于链接，请使用两个常用属性：<a>和/或action=“”：

<form action="stackoverflow.com"/>
   <button type="submit" value="Submit Form"

或

“href”是<a>属性的一部分。它有助于直接链接：

2021-02-19 18:19:14

Bootstrap方法也适用于Bulma。

2021-09-22 19:42:43

随着其他一些人的添加，您可以使用一个简单的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>

就是这样。这很容易做到，让你随心所欲地发挥创造力。您可以控制颜色、大小、形状（半径）等。有关详细信息，请参阅我在网站上找到的。

2013-12-03 05:09:21

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＞元素允许子级。

2010-05-25 16:40:49

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

推荐文章

最新文章

标签