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

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

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

当前回答

<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

如果您想创建一个充当链接的按钮，有多种方法可以实现。选择最适合您情况的。下面的代码在按钮内创建一个链接。

<按钮><a href=“www.google.com”>转到谷歌</a></按钮>

第二种方法是在单击按钮时打开一个新窗口

<button onclick=“open（'ww.google.com'）”>google</button>

或者添加事件侦听器

document.querySelector（“#btn”）.addEventListener（'click'，打开（'ww.google.com'））<button id=“btn”>转到Google</button>

有很多方法可以做到这一点，但这只是按钮的三个小例子，它们起到了链接的作用。换句话说，打开链接的按钮。

2021-04-04 00:47:36

您可以使用JavaScript：

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

2019-02-25 18:51:38

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

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

或

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

2021-02-19 18:19:14

在<button></button>上使用<a></a>属性回答的人很有帮助。

但最近，我在<form></form>中使用链接时遇到了一个问题。

该按钮现在被视为提交按钮（HTML5）。我已经尝试了一种方法，并找到了这种方法。

创建一个CSS样式按钮，如下所示：

.btn-style {
    border: solid 1px #0088cc;
    border-radius: 6px;
    moz-border-radius: 6px;
    -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 1.0);
    -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 1.0);
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 1.0);
    font-size: 18px;
    color: #696869;
    padding: 1px 17px;
    background: #eeeeee;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(49%, #eeeeee), color-stop(72%, #cccccc), color-stop(100%, #eeeeee));
    background: -moz-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
    background: -webkit-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
    background: -o-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
    background: -ms-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
    background: linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#eeeeee', GradientType=0);
}

或者在这里创建一个新的：CSS按钮生成器

然后用一个以您所创建的CSS样式命名的类标记创建链接：

<a href='link.php' class='btn-style'>Link</a>

这是一把小提琴：

JSFiddle公司

2014-07-23 08:50:29

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

推荐文章

最新文章

标签