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

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


当前回答

使用<a>标记创建一个按钮并添加适当的CSS内容:

.邻接{背景:#bada55;填充:5px;边界半径:5px;过渡:1s;文本装饰:无;颜色:黑色;}.attatton:悬停{background:#2a2;}<a href=“https://example.com“class=”abutton“>继续</a>

其他回答

如果您使用的是SSL证书:

<a href="https://www.google.com" target="_blank"><button>Click me !</button></a>

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

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

就是这样。这很容易做到,让你随心所欲地发挥创造力。您可以控制颜色、大小、形状(半径)等。有关详细信息,请参阅我在网站上找到的。

Use:

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

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

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

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