Use:

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

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

如果您使用的是SSL证书：

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

它实际上非常简单，不使用任何表单元素。您可以只使用＜a＞标签，里面有一个按钮：）。

这样地：

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

它会将href加载到同一页面中。想要新页面吗？只需使用target=“_blank”。

EDIT

几年后，虽然我的解决方案仍然有效，但请记住，您可以使用大量CSS来使它看起来像您想要的那样。这只是一条捷径。

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

对于HTML 5和带有图像背景的样式按钮

<a id=“Navigate”href=“http://www.google.com"><输入type=“按钮”id=“导航按钮”style=“背景图像：url(http://cdn3.blogsdna.com/wp-content/uploads/2010/03/Windows-Phone-7-Series-Icons-Pack.png);背景重复：无重复；背景位置：-272px-112px；光标：指针；高度：40px；宽度：40px；边框半径：26px；边框样式：实心；边框颜色：#000；边框宽度：3px；“title=”导航“/></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可能看起来很难看，所以分解它很好）。

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