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

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


当前回答

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

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

其他回答

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

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

在<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公司

从HTML5开始,按钮支持formaction属性。最重要的是,不需要JavaScript或诡计。

<表单><button formaction=“http://stackoverflow.com“>转到堆栈溢出!</button></form>

注意事项

必须由<form>标记包围。<button>类型必须是“submit”(或未指定)-我无法使用“button”类型。这引出了以下问题。重写表单中的默认操作。换句话说,如果在另一个表单中执行此操作,将导致冲突。

参考:formaction

浏览器支持:<button>:button元素

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

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

如果您想避免使用表单或输入,并且您正在寻找一个看起来像按钮的链接,那么可以使用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可能看起来很难看,所以分解它很好)。

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