HTML

简单的HTML方式是将其放在一个＜form＞中，其中在action属性中指定所需的目标URL。

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

如果需要，设置CSS显示：inline；以使其与周围文本保持一致。您也可以使用<button type=“submit”>来代替上面示例中的<input type=“提交”>。唯一的区别是＜button＞元素允许子级。

您可以直观地期望能够使用<button href=“https://google.com“>类似于＜a＞元素，但不幸的是，根据HTML规范，该属性不存在。

CSS

如果允许使用CSS，只需使用一个＜a＞，您可以使用外观属性（这在Internet Explorer中仅不受支持）将其设置为类似按钮。

<a href="https://google.com" class="button">Go to Google</a>

a.button {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    color: initial;
}

或者从众多CSS库中选择一个，比如Bootstrap。

<a href="https://google.com" class="btn btn-primary">Go to Google</a>

JavaScript

如果允许JavaScript，请设置window.location.href。

<input type="button" onclick="location.href='https://google.com';" value="Go to Google" />

您也可以使用＜button＞来代替上面示例中的＜input type＝“button”＞。唯一的区别是＜button＞元素允许子级。

如果你需要的是它看起来像一个按钮，重点放在渐变图像上，你可以这样做：

<a href="www.yourlink.com" class="btn btn-gradient"><i class="fa fa-home"> Button Text</i></a>

如果要创建用于URL的按钮，请为锚点创建按钮类。

a.button {
    background-color: #999999;
    color: #FFFFFF !important;
    cursor: pointer;
    display: inline-block;
    font-weight: bold;
    padding: 5px 8px;
    text-align: center;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
.button:hover {
    text-decoration: none;
}

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

这里的所有解决方案都不适合我，所以在尝试了所有解决方案之后，我得到了一些微不足道的东西：仅HTML（无表单提交），无CSS，无JS：

<a href="/link"><button>Link</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可能看起来很难看，所以分解它很好）。

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