button - 如何创建一个html按钮, 它可用作链接?

  显示原文与译文双语对照的内容

我想创建一个类似链接的HTML按钮。 所以,当你单击按钮时,它会重定向到页面。 我希望它尽可能的接近。 我也希望在URL中没有多余的字符或者参数。

我如何实现这个?

我目前正在执行以下操作:


<form method="get" action="/page2">
 <button type="submit">Continue</button>
</form>

但是问题在于在 SafariIE 中,它在URL末尾添加问号字符。 我需要找到一个不在URL末尾添加任何字符的解决方案。

还有另外两种解决方案: 使用JavaScript或者将链接样式设置为按钮。

使用 JavaScript:


<button onclick="window.location.href='/page2'">Continue</button>

但这显然需要 JavaScript,因此,对于屏幕阅读器来说,它是不可访问的。 链接的要点是转到另一页。 所以试图让一个按钮像一个链接一样是一个错误的解决方案。 我的建议是你应该使用一个链接和样式来看起来像一个按钮


<a href="/page2>Continue</a>

时间:

将它放入 <form> 中,在 action 属性中指定所需的目标 URL 。


<form action="http://google.com">
 <input type="submit" value="Go to Google">
</form>

如果是你在基本HTML锚点标记中寻找的按钮的视觉外观,那么你可以使用 Twitter Bootstrap 框架来格式化以下常见的HTML类型链接/按钮以显示为按钮。 请注意框架 2和 3之间的视觉差异:


<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">

Bootstrap ( v2 ) 示例外观:

Sample output of Boostrap buttons

Bootstrap ( v3 ) 示例外观:

enter image description here

访问 Bootstrap ( v2 ) 或者 Bootstrap ( v3 ) 按钮部分,了解一些示例。


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

编辑 22-06-2013: 这里标记在 html 5 中不再有效,又退货将不验证也不总是如可能预期。 使用另一种方法。

它是actualy非常简单且不使用任何形式元素。 你可以只使用 <> 标记,其中包含一个按钮:) 。

就像这个:


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

它将把href加载到同一个页面。 想要新页面只需使用 target="new"

如果你正在使用内部表单,请将这里属性添加为 type="重设"和按钮元素。 它将阻止表单操作。


<button type="reset" onclick="location.href='http://www.example.com'">
www.example.com
</button>

像下面这样做有什么缺点?


<a class='nostyle' href='http://www.google.com/'>
 <span class='button'>Schedule</span>
</a>

其中 a.nostyle 是一个类,其中包含你的链接样式( 你可以在那里删除标准链接样式) 和 span.button 是一个具有"按钮"样式的类( 背景,边框,渐变,等等 ) 。

除了其他一些添加的内容之外,你还可以使用不带PHP的简单CSS类with没有 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>

就是这样。它很容易做到,让你像你喜欢的那样。 你可以控制颜色,大小,shapes(radius), 等等 以获得更多的detailsm,参见我在 。on上找到的站点。

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


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

然后使用CSS来设置链接和按钮的样式,这样链接就会占用按钮( 所以用户没有 miss-clicking ) 中的整个空间:


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

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

...