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

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

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

当前回答

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

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

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

如果您使用的是CSS库或主题，只需将按钮的类应用于锚/链接标记即可。

以下是一个UI示例：

<a class="btn-block-option" href="">
    <i class="si si-reload"></i>
</a>

2020-05-28 17:07:46

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

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

2010-05-25 16:44:27

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

推荐文章

最新文章

标签