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

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

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

当前回答

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

其他回答

我在一个我目前正在开发的网站上使用了这个，效果很好！如果你也想要一些很酷的样式，我会把CSS放在这里。

输入[类型=“提交”]{背景色：白色；宽度：200px；边框：3px实心#c9c9c9；字体大小：24pt；边距：5px；颜色：#969696；}input[type=“submit”]：悬停{颜色：白色；背景色：#969696；过渡：颜色0.2s 0.05s容易；过渡：背景色0.2s 0.05s轻松；光标：指针；}<input type=“submit”name=“submit”onClick=“window.location=”http://example.com'">

一个正在工作的JSFiddle在这里。

2014-11-16 01:39:53

Use:

<a href="http://www.stackoverflow.com/">
    <button>Click me</button>
</a>

不幸的是，这种标记在HTML5中不再有效，既不能验证，也不能始终按预期工作。使用另一种方法。

2010-05-25 16:42:24

Bootstrap方法也适用于Bulma。

2021-09-22 19:42:43

我知道已经提交了很多答案，但似乎没有一个能真正解决问题。以下是我对解决方案的看法：

使用OP开头的<form method=“get”>方法。这非常有效，但有时会附加一个？到URL。这个是主要问题。此解决方案在不启用JavaScript的情况下工作。回退将添加？到URL的结尾。如果启用了JavaScript，那么您可以使用jQuery/JavaScript来处理以下链接，这样吗？不会最终附加到URL。对于极少数未启用JavaScript的用户，它将无缝地回退到＜form＞方法。JavaScript代码使用事件委托，因此您可以在＜form＞或＜button＞存在之前附加一个事件监听器。我在这个例子中使用jQuery，因为它既快速又简单，但也可以用“香草”JavaScript实现。JavaScript代码防止发生默认操作，然后遵循<form>action属性中给出的链接。

JSBin示例（代码段不能跟随链接）

//使用“link”类侦听文档中某个元素的任何单击$（document）.on（'click'，'.link'，函数（e）{//阻止默认操作（例如提交表单）e.预防违约（）；//获取表单中指定的URLvar url=e.target.parentElement.action；window.location=url；});<!DOCTYPE html><html><head><script src=“https://code.jquery.com/jquery-1.11.1.min.js“></script><meta charset=“utf-8”><title>表单按钮作为链接</title></head><body><form method=“get”action=“http://stackoverflow.com/questions/2906582/how-to-create-an-html-button-that-acts-like-a-link">的按钮<button type=“submit”class=“link”role=“link”>链接</button></form></body></html>

2015-05-05 22:58:30

如果您在基本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）示例外观：

2012-12-05 08:59:29

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

推荐文章

最新文章

标签