HTML

纯 HTML 方法是将其放在 <form> 中，您可以在其中在 action 属性中指定所需的目标 URL。

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

如有必要，在表单上设置 CSS display: inline; 以使其与周围的文本保持一致。除了上面示例中的 <input type="submit">，您还可以使用 <button type="submit">。唯一的区别是 <button> 元素允许子元素。

您会直观地期望能够使用与 <a> 元素类似的 <button href="https://google.com">，但不幸的是，不，根据 HTML specification，此属性不存在。

CSS

如果允许 CSS，只需使用 <a>，您可以使用 appearance 属性 (it's only not supported in Internet Explorer) 将其设置为看起来像按钮的样式。

a.button { -webkit-appearance: 按钮； -moz-外观：按钮；外观：按钮；文字装饰：无；颜色：初始； } 转到谷歌

或者从众多 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" />

除了上面示例中的 <input type="button">，您还可以使用 <button>。唯一的区别是 <button> 元素允许子元素。

www.example.com

请注意，type="button" 属性很重要，因为 its missing value default is the Submit Button state。

如果它是您在基本 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">

Bootstrap (v4) 样品外观：

https://i.stack.imgur.com/ytswI.gif

Bootstrap (v3) 样品外观：

https://i.stack.imgur.com/pXgPr.png

Bootstrap (v2) 样品外观：

https://i.stack.imgur.com/bMTDv.gif

利用：

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

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

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

注意事项

必须被

它实际上非常简单，并且不使用任何表单元素。您可以只使用 标签和里面的按钮:)。

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

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

http://someserver/pages2?

有一种方法可以解决这个问题，但它需要服务器端配置。使用 Apache Mod_rewrite 的一个示例是将带有结尾 ? 的所有请求重定向到不带 ? 的相应 URL。这是一个使用 .htaccess 的示例，但有一个完整的线程 here：

RewriteCond %{THE_REQUEST} \?\ HTTP [NC]
RewriteRule ^/?(index\.cfm)? /? [R=301,L]

类似的配置可能因使用的网络服务器和堆栈而异。所以总结一下这个方法：

优点：

这是一个真正的按钮，从语义上讲它是有意义的。因为它是一个真正的按钮，它也将像一个真正的按钮（例如，可拖动行为和/或在活动时按下空格键时模拟点击）。无需 JavaScript，无需复杂的样式。

缺点：

尾随？在某些浏览器中看起来很难看。这可以通过黑客（在某些情况下）使用 POST 而不是 GET 来解决，但干净的方法是使用服务器端重定向。服务器端重定向的缺点是，由于 304 重定向，它将导致对这些链接的额外 HTTP 调用。添加额外的 元素 使用多个表单时的元素定位可能会很棘手，并且在处理响应式设计时会变得更糟。根据元素的顺序，使用此解决方案可能无法实现某些布局。如果设计受到这一挑战的影响，这最终可能会影响可用性。

解决方案 2：使用 JavaScript。

您可以使用 JavaScript 触发 onclick 和其他事件来模拟使用按钮的链接的行为。下面的示例可以改进并从 HTML 中删除，但它只是为了说明这个想法：

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

优点：

简单（用于基本要求）并保持语义，同时不需要额外的形式。因为它是一个真正的按钮，它也将像一个真正的按钮（例如，可拖动行为和/或在活动时按下空格键时模拟点击）。

缺点：

需要 JavaScript，这意味着更难访问。这对于链接等基本（核心）元素并不理想。

解决方案 3：锚（链接）样式像按钮。

Styling a link like a button 相对简单，可以在不同的浏览器中提供类似的体验。 Bootstrap 可以做到这一点，但您也可以使用简单的样式轻松实现。

优点：

简单（基本要求）和良好的跨浏览器支持。不需要 即可工作。不需要 JavaScript 即可工作。

缺点：

语义有点坏，因为你想要一个像链接一样的按钮，而不是像按钮一样的链接。它不会重现解决方案#1 的所有行为。它不支持与按钮相同的行为。例如，链接在拖动时的反应不同。如果没有一些额外的 JavaScript 代码，“空格键”链接触发器也将无法工作。这会增加很多复杂性，因为浏览器在支持按钮上的按键事件方面并不一致。

结论

解决方案＃1（表单中的按钮）对于所需工作最少的用户来说似乎是最透明的。如果您的布局不受此选择的影响并且服务器端调整是可行的，那么对于可访问性是最优先考虑的情况（例如错误页面上的链接或错误消息），这是一个不错的选择。

如果 JavaScript 不是您的可访问性要求的障碍，那么解决方案 #2 (JavaScript) 将优于 #1 和 #3。

如果出于某种原因，可访问性至关重要（JavaScript 不是一个选项），但您的设计和/或服务器配置阻止您使用选项＃1，那么解决方案＃3（锚样式像按钮）是一个很好的替代方案，可以以最小的可用性影响解决这个问题。

您可以简单地在元素周围放置一个标签：

<a href="http://google.com" target="_blank">
    <button>My Button</button>
</a>

https://jsfiddle.net/hj6gob8b/

只需将您的按钮放在参考标签内，例如，

<a href="https://www.google.com/"><button>Next</button></a>

这似乎对我来说非常有效，并且不会在链接中添加任何 %20 标签，这正是您想要的。我使用了 Google 的链接来演示。

您当然可以将其包装在表单标签中，但这不是必需的。

链接另一个本地文件时，只需将其放在同一个文件夹中并添加文件名作为参考即可。或者如果 in 不在同一个文件夹中，请指定文件的位置。

<a href="myOtherFile"><button>Next</button></a>

这也不会在 URL 的末尾添加任何字符，但是在以文件名结尾之前，它确实将文件项目路径作为 URL。例如

如果我的项目结构是......

.. 表示文件夹\

表示一个文件，而四个 |表示父文件夹中的子目录或文件

..公众 |||| ..html |||| |||| -main.html |||| |||| -secondary.html

如果我打开文件 main.html，URL 将是，

http://localhost:0000/public/html/main.html?_ijt=i7ms4v9oa7blahblahblah

但是，当我单击 main.html 中的按钮更改为 secondary.html 时，URL 将是，

http://localhost:0000/public/html/secondary.html

URL 末尾不包含特殊字符。

顺便说一句 - （%20 表示它编码并插入到它们的位置的 URL 中的一个空格。）

注意： localhost:0000 显然不会是 0000。在那里您将拥有自己的端口号。

再者，main.html URL末尾的?_ijt=xxxxxxxxxxxxxx，x是你自己的连接决定的，所以显然不会等于我的。

看起来我在陈述一些非常基本的观点，但我只想尽可能地解释一下。

如果您想避免使用表单或输入，并且您正在寻找一个看起来像按钮的链接，您可以使用 div 包装器、锚点和 h1 标记创建漂亮的按钮链接。您可能希望这样做，以便您可以在页面周围自由放置链接按钮。这对于水平居中的按钮和在其中包含垂直居中的文本特别有用。就是这样：

您的按钮将由三个嵌套部分组成：一个 div 包装器、一个锚点和一个 h1，如下所示：

.link-button-wrapper { 宽度：200px;高度：40px；盒子阴影：插图 0px 1px 0px 0px #ffffff;边框半径：4px；背景颜色：#097BC0；盒子阴影：0px 2px 4px 灰色；显示：块；边框：1px 实心#094BC0; } .link-button-wrapper > a { display: inline-table;光标：指针；文字装饰：无；高度：100%；宽度：100%； } .link-button-wrapper > a > h1 { margin: 0 auto;显示：表格单元格；垂直对齐：中间；颜色：#f7f8f8；字体大小：18px；字体系列：机舱常规；文本对齐：居中； }

Here's 一个 jsFiddle 来检查它并玩弄它。

这种设置的好处： 1. 使 div 包装器 display: block 使其易于居中（使用 margin: 0 auto）和定位（而 是内联的并且难以定位并且不可能居中）。

您可以只制作 显示：块，移动它，并将其设置为按钮，但随后垂直对齐其中的文本变得困难。这允许您使 显示：inline-table 和

显示：table-cell，这允许您在

上使用垂直对齐：中间并将其垂直居中（这在一个按钮）。是的，您可以使用填充，但如果您希望您的按钮动态调整大小，那将不会那么干净。有时当您在 div 中嵌入 时，只有文本是可点击的，此设置使整个按钮可点击。如果您只是想移动到另一个页面，则不必处理表单。表格是用来输入信息的，应该为此保留。允许您将按钮样式和文本样式清晰地分开（拉伸优势？当然，但 CSS 看起来很讨厌，所以分解它很好）。

它绝对让我的生活更轻松，为可变尺寸屏幕设计移动网站。

---

你实际上得到了一个没有任何 CSS 的合理按钮

结合其他一些人添加的内容，您可以尽情使用简单的 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>

这就对了。这很容易做到，让您随心所欲地发挥创造力。您可以控制颜色、大小、形状（半径）等。有关详细信息，请参阅the site I found this on。

七种方法来做到这一点：

使用 window.location.href = 'URL' 使用 window.location.replace('URL') 使用 window.location = 'URL' 使用 window.open('URL') 使用 window.location.assign('URL') 使用HTML 表单使用 HTML 锚标记

点击我 点击我 点击我 < button onclick='window.open("https://stackoverflow.com","_self","","")'> 点击我 点击我 点击我

对于 Nicolas' answer，以下内容对我有用，因为该答案没有 type="button"，因此它开始表现为提交类型......因为我已经有一种提交类型。它对我不起作用......现在您可以将一个类添加到按钮或 <a> 以获得所需的布局：

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

另一种选择是在按钮中创建一个链接：

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

然后使用 CSS 设置链接和按钮的样式，使链接占据按钮内的整个空间（这样就不会出现用户误点击）：

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

我创建了一个 demo here。

请记住 the spec 表示这是无效的，因为按钮不应包含任何交互式后代。

如果您想创建一个用于任何地方的 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;
}

我知道已经提交了很多答案，但似乎没有一个能真正解决问题。这是我对解决方案的看法：

使用 OP 开始使用的

您也可以使用按钮：

例如，在 ASP.NET Core 语法中：

// Some other tags
 <form method="post">
      <input asp-for="YourModelPropertyOrYourMethodInputName"
      value="@TheValue" type="hidden" />
      <button type="submit" class="link-button" formaction="/TheDestinationController/TheDestinationActionMethod">
      @(TextValue)
      </button>
  </form>
// Other tags...


<style>
       .link-button {
        background: none !important;
        border: none;
        padding: 0 !important;
        color: #20a8d8;
        cursor: pointer;
    }
</style>

对于 HTML 5 和样式按钮以及图像背景

使用 <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 Button Generator

然后使用以您创建的 CSS 样式命名的类标签创建链接：

<a href='link.php' class='btn-style'>Link</a>

这是一个小提琴：

JSFiddle

使用 <a> 标记和适当的 css 创建一个按钮

.abutton { 背景：#bada55;填充：5px；边框半径：5px；过渡：1s；文字装饰：无；颜色：黑色; } .abutton:hover { 背景：#2a2; } 继续

您还可以将按钮 type-property 设置为“按钮”（使其不提交表单），然后将其嵌套在链接中（使其重定向用户）。

这样，您可以在提交表单的同一表单中拥有另一个按钮，以备不时之需。我也认为在大多数情况下，这比将表单方法和操作设置为链接更可取（除非它是我猜的搜索表单......）

例子：

这样，第一个按钮重定向用户，而第二个按钮提交表单。

请注意确保按钮不会触发任何操作，因为这会导致冲突。同样作为 Arius pointed out，您应该知道，由于上述原因，严格来说，根据标准，这并不是有效的 HTML。然而，它在 Firefox 和 Chrome 中确实可以正常工作，但我还没有在 Internet Explorer 上测试过它。

堆栈溢出