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

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

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

当前回答

您可以使用JavaScript：

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

2019-02-25 18:51:38

其他回答

这里的所有解决方案都不适合我，所以在尝试了所有解决方案之后，我得到了一些微不足道的东西：仅HTML（无表单提交），无CSS，无JS：

<a href="/link"><button>Link</button></a>

2022-10-30 18:30:17

如果您想避免使用表单或输入，并且您正在寻找一个看起来像按钮的链接，那么可以使用div包装器、锚点和h1标记创建好看的按钮链接。您可能希望这样做，以便您可以在页面周围自由放置链接按钮。这对于水平居中的按钮和在其中具有垂直居中的文本特别有用。以下是操作方法：

按钮将由三个嵌套部分组成：div包装器、锚点和h1，如下所示：

.link按钮包装{宽度：200px；高度：40px；方框阴影：插入0px 1px 0px 0px#ffffff；边界半径：4px；背景色：#097BC0；方框阴影：0px 2px 4px灰色；显示：块；边框：1px实心#094BC0；}.link按钮包装器>a{显示：内联表；光标：指针；文本装饰：无；高度：100%；宽度：100%；}.link按钮包装器>a>h1{边距：0自动；显示：表格单元格；垂直对齐：中间；颜色：#f7f8f8；字体大小：18px；字体系列：cabinregular；文本对齐：居中；}<div class=“link button wrapper”><a href=“your/link/此处”><h1>按钮</h1></a></div>

这里有一个jsFiddle，可以查看它并玩它。

此设置的优点：1.使div包装显示：块易于居中（使用margin:0auto）和定位（而＜a＞是内联的，更难定位，不可能居中）。

您可以只制作＜a＞显示：块，移动它，并将其设置为按钮样式，但随后垂直对齐其中的文本会变得困难。这允许您创建＜a＞display：inline表格和＜h1＞display：table单元格，这允许您在＜h1’上使用垂直对齐：middle并垂直居中（这在按钮上总是很好的）。是的，你可以使用填充，但如果你想让你的按钮动态调整大小，那就不那么干净了。有时，当您在div中嵌入＜a＞时，只有文本是可单击的，这种设置使整个按钮都可单击。如果您只是想移动到另一页，则不必处理表单。表格是用来输入信息的，应该为此保留。允许您干净地将按钮样式和文本样式彼此分离（拉伸优势？当然，但CSS可能看起来很难看，所以分解它很好）。

它确实让我的生活变得更轻松，为可变大小的屏幕设计移动网站。

2014-08-13 03:49:36

<button onclick=“location.href='http://www.example.com'“type=”按钮“>www.example.com</button>

请注意，type=“button”属性很重要，因为它缺少的默认值是SubmitButton状态。

2010-05-25 16:44:27

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

使用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

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

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

2017-07-21 05:59:07

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

推荐文章

最新文章

标签