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

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

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

当前回答

另一个选项是在按钮中创建链接：

<button type="button"><a href="yourlink.com">Link link</a></button>

然后使用CSS来设置链接和按钮的样式，使链接占据按钮内的全部空间（这样用户就不会错过点击）：

button, button a{position:relative;}
button a{top:0;left:0;bottom:0;right:0;}

我在这里创建了一个演示。

请记住，规范中说这是无效的，因为按钮不应包含任何交互式后代。

2014-01-16 04:28:47

其他回答

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

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

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

2010-05-25 16:44:27

实现这一点的唯一方法（除了BalusC巧妙的表单想法！）是向按钮添加JavaScript onclick事件，这对可访问性不利。

您是否考虑过将普通链接设置为按钮样式？你不能用这种方式实现特定于操作系统的按钮，但这仍然是最好的IMO方式。

2010-05-25 16:41:43

另一个选项是在按钮中创建链接：

<button type="button"><a href="yourlink.com">Link link</a></button>

然后使用CSS来设置链接和按钮的样式，使链接占据按钮内的全部空间（这样用户就不会错过点击）：

button, button a{position:relative;}
button a{top:0;left:0;bottom:0;right:0;}

我在这里创建了一个演示。

请记住，规范中说这是无效的，因为按钮不应包含任何交互式后代。

2014-01-16 04:28:47

<form>
    <input type="button" value="Home Page" onclick="window.location.href='http://www.wherever.com'"> 
</form>

2010-05-25 16:41:42

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

推荐文章

最新文章

标签