如何创建充当链接的HTML按钮？

我想创建一个类似于链接的HTML按钮。因此，当您单击按钮时，它将重定向到页面。我希望它尽可能地易于访问。

我也希望这样做，因此URL中没有任何多余的字符或参数。

我该如何实现？

根据到目前为止发布的答案，我目前正在这样做：

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

但这是在Safari和Internet Explorer中，它在URL的末尾添加了问号字符。我需要找到一种不会在URL末尾添加任何字符的解决方案。

还有其他两种解决方案：使用JavaScript或设置链接的样式以使其看起来像按钮。

使用JavaScript：

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

但这显然需要JavaScript，因此，屏幕阅读器无法访问它。链接的重点是转到另一个页面。因此，试图使按钮像链接一样工作是错误的解决方案。我的建议是，您应该使用链接并设置其样式以使其看起来像一个按钮。

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

的HTML

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

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

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

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

的CSS

如果允许使用CSS，则只需使用<a>您设置的样式即可看起来像按钮，并使用appearance属性（仅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" />

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

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

请注意，该type="button"属性很重要，因为其缺失值默认为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）示例外观：

Bootstrap（v3）示例外观：

Bootstrap（v2）示例外观：

采用：

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

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

从HTML5开始，按钮支持formaction属性。最好的是，不需要Javascript或技巧。

<form>
  <button formaction="http://stackoverflow.com">Go to Stack Overflow!</button>
</form>

注意事项

• 必须被<form>标签包围。
• <button>类型必须为“提交”（或未指定），但无法与“按钮”类型一起使用。这在下面提出了要点。
• 覆盖表单中的默认操作。换句话说，如果您在另一种形式下执行此操作，则会引起冲突。

参考：https : //developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formaction 浏览器支持：https : //developer.mozilla.org/en-US/docs/Web/ HTML /元素/按钮＃浏览器兼容性

实际上，它非常简单，并且不使用任何表单元素。您可以只在<a>标记内使用一个按钮：)。

像这样：

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

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

编辑

几年后，尽管我的解决方案仍然有效，但是请记住，您可以使用很多CSS使其外观如您所愿。这只是一种快速的方法。

如果使用内部表单，请添加属性type =“ reset”和button元素。它将阻止表单动作。

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

<form>
    <input TYPE="button" VALUE="Home Page"
        onclick="window.location.href='http://www.wherever.com'"> 
</form>

这个问题似乎有三种解决方案（各有利弊）。

解决方案1：以表格形式单击。

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

但这是在某些版本的流行浏览器（例如Chrome，Safari和Internet Explorer）中，它在URL的末尾添加了问号字符。因此，换句话说，URL上方的代码将最终看起来像这样：

http://someserver/pages2?

有一种解决方法，但需要服务器端配置。一个例子使用 Apache Mod_rewrite的是将所有带有尾随的请求重定向?到其相应的URL，而不带?。下面是使用的.htaccess的例子，但有一个完整的线程在这里：

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

类似的配置可能会有所不同，具体取决于所使用的Web服务器和堆栈。因此，此方法总结如下：

优点：

1. 这是一个真正的按钮，从语义上讲是有意义的。
2. 由于它是一个真实的按钮，因此它也将像真实的按钮一样起作用（例如，在活动状态下按下空格键时可拖动行为和/或模仿点击）。
3. 无需JavaScript，无需复杂的样式。

缺点：

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

解决方案2：使用JavaScript。

您可以使用JavaScript触发onclick和其他事件，以使用按钮模仿链接的行为。下面的示例可以改进，也可以从HTML中删除，但是这里只是为了说明这一点：

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

优点：

1. 简单（满足基本要求）并保留语义，而无需其他形式。
2. 由于它是一个真实的按钮，因此它也将像真实的按钮一样起作用（例如，在活动状态下按下空格键时可拖动行为和/或模仿点击）。

缺点：

1. 需要JavaScript，这意味着访问性较差。这对于诸如链接之类的基础（核心）元素而言并不理想。

解决方案3：锚（链接）的样式类似于按钮。

像按钮一样设计链接的样式相对容易，并且可以在不同的浏览器中提供类似的体验。Bootstrap可以做到这一点，但是使用简单的样式也可以很容易地自己实现。

优点：

1. 简单（基本要求）和良好的跨浏览器支持。
2. 不需要<form>工作。
3. 不需要JavaScript即可工作。

缺点：

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

结论

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

如果JavaScript不妨碍您的可访问性要求，则解决方案＃2（JavaScript）优于＃1和＃3。

如果出于某种原因，可访问性至关重要（不是JavaScript的选择），但是您的设计和/或服务器配置使您无法使用选项＃1，则可以使用解决方案＃3（锚定样式类似于按钮）是解决此问题且对可用性影响最小的好选择。

为什么不将按钮放在参考标记中呢？

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

这对我来说似乎完美，并且不会按照您的意愿在链接中添加任何％20标签。我已经使用了Google的链接进行演示。

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

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

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

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

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

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

..public
|||| ..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由您自己的连接确定，因此显然不等于我的。

似乎我在说一些真正的基本要点，但我只想尽我所能解释。感谢您的阅读，我希望这至少对您有所帮助。编程愉快。

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

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

https://jsfiddle.net/hj6gob8b/

做到这一点的唯一方法（除了BalusC巧妙的表单构想！）是添加JavaScript。 onclick在按钮上事件，这不利于可访问性。

您是否考虑过像按钮一样设计普通链接的样式？您不能以这种方式实现特定于操作系统的按钮，但这仍然是IMO的最佳方法。

再加上其他一些功能，只需使用一个简单的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>

这就对了。这很容易做到，并且可以让您发挥自己的创造力。您可以控制颜色，大小，形状（半径）等。有关更多详细信息，请参见我在上找到的网站。

如果要避免使用表单或输入，并且正在寻找按钮外观链接，则可以使用div包装器，锚点和h1标签来创建外观美观的按钮链接。您可能会希望这样做，因此可以在页面上随意放置链接按钮。这对于水平居中居中的按钮并在其中包含垂直居中的文本特别有用。就是这样：

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

.link-button-wrapper {
    width: 200px;
    height: 40px;
    box-shadow: inset 0px 1px 0px 0px #ffffff;
    border-radius: 4px;
    background-color: #097BC0;
    box-shadow: 0px 2px 4px gray;
    display: block;
    border:1px solid #094BC0;
}
.link-button-wrapper > a {
    display: inline-table;
    cursor: pointer;
    text-decoration: none;
    height: 100%;
    width:100%;
}
.link-button-wrapper > a > h1 {
    margin: 0 auto;
    display: table-cell;
    vertical-align: middle;
    color: #f7f8f8;
    font-size: 18px;
    font-family: cabinregular;
    text-align: center;
}

<div class="link-button-wrapper">
    <a href="your/link/here">
        <h1>Button!</h1>
    </a>
</div>

这是一个jsFiddle来检查它并。

此设置的好处：1.使div包装器显示：块使居中（使用margin：0自动）和位置（<a>是内联且更难定位且无法居中）更容易。

2. 您可以只使<a> display：block，移动它，并将其样式设置为按钮，但是垂直对齐其中的文本变得很困难。

3. 这使您可以使<a>显示：内联表和<h1>显示：table-cell，这使您可以在<h1>上使用vertical-align：中间并将其垂直居中（在一个按钮）。是的，您可以使用填充，但是如果您希望按钮动态调整大小，那将不那么干净。

4. 有时，当您在div中嵌入<a>时，仅可单击文本，此设置使整个按钮可单击。

5. 如果您只是想移至另一页，则不必处理表单。表格是用于输入信息的，应为此保留。

6. 允许您清楚地将按钮样式和文本样式彼此分开（拉伸优势？当然，但是CSS看起来很讨厌，因此分解起来很不错）。

无疑，这使我的生活变得更加轻松，为可变大小的屏幕设计了一个移动网站。

type="button"@Nicolas ，以下内容对我有用，因为您没有，它开始表现为提交类型。按钮或<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;}

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

如果要创建用于任何地方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;
}

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

1. 使用<form method="get">OP所使用的方法。这确实很好，但是有时会?在URL 后面附加一个。的?是主要问题。
2. 启用JavaScript时，请使用jQuery / JavaScript进行以下链接，以便?最终不会附加到URL。<form>对于没有启用JavaScript的极少数用户，它将无缝地回退到该方法。
3. JavaScript代码使用事件代表团，因此您可以将之前的附加事件侦听器<form>或者<button>甚至存在。我在此示例中使用的是jQuery，因为它既快速又容易，但是也可以在“普通” JavaScript中完成。
4. JavaScript代码可防止发生默认操作，然后按照<form> action属性中给出的链接进行操作。

JSBin示例（代码段无法跟随链接）

// Listen for any clicks on an element in the document with the `link` class
$(document).on('click', '.link', function(e) {
    // Prevent the default action (e.g. submit the form)
    e.preventDefault();

    // Get the URL specified in the form
    var url = e.target.parentElement.action;
    window.location = url;
});

<!DOCTYPE html>
<html>

    <head>
        <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
        <meta charset="utf-8">
        <title>Form buttons as links</title>
    </head>

    <body>
        <!-- Set `action` to the URL you want the button to go to -->
        <form method="get" action="http://stackoverflow.com/questions/2906582/how-to-create-an-html-button-that-acts-like-a-link">
            <!-- Add the class `link` to the button for the event listener -->
            <button type="submit" class="link">Link</button>
        </form>
    </body>

</html>

7种方法：

1. 使用 window.location.href = 'URL'
2. 使用 window.location.replace('URL')
3. 使用 window.location = 'URL'
4. 使用 window.open('URL')
5. 使用 window.location.assign('URL')
6. 使用HTML 表单
7. 使用HTML 锚标记

<!-- Using window.location.href = 'URL' -->
<button onclick='window.location.href = "https://stackoverflow.com"'>
  Click Me
</button>

<!-- Using window.location.replace('URL') -->
<button onclick='window.location.replace("https://stackoverflow.com")'>
  Click Me
</button>

<!-- Using window.location = 'URL' -->
<button onclick='window.location = "https://stackoverflow.com"'>
  Click Me
</button>

<!-- Using window.open('URL') -->
<button onclick='window.open("https://stackoverflow.com","_self","","")'>
  Click Me
</button>

<!-- Using window.location.assign('URL') -->
<button onclick='window.location.assign("http://www.stackoverflow.com")'>
  Click Me
</button>

<!-- Using HTML form -->
<form action='https://stackoverflow.com' method='get'>
  <input type='submit' value='Click Me'/>
</form>

<!-- Using HTML anchor tag -->
<a href='https://stackoverflow.com'>
  <button>Click Me</button>
</a>

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

<a id="Navigate" href="http://www.google.com">
  <input 
    type="button"
    id="NavigateButton"
    style="
      background-image: url(http://cdn3.blogsdna.com/wp-content/uploads/2010/03/Windows-Phone-7-Series-Icons-Pack.png);
      background-repeat: no-repeat;
      background-position: -272px -112px;
      cursor:pointer;
      height: 40px;
      width: 40px;
      border-radius: 26px;
      border-style: solid;
      border-color:#000;
      border-width: 3px;" title="Navigate"
    />
</a>

您也可以使用一个按钮：

例如，在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>

如果您使用的是SSL证书

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

使用上的<a></a>属性进行回答的<button></button>人很有帮助。

但是最近，当我在中使用链接时遇到了问题<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>

这是一个小提琴：

JS小提琴

我将此用于我目前正在工作的网站，并且效果很好！如果您也想要一些很酷的样式，我也会在这里放CSS。

input[type="submit"] {
  background-color: white;
  width: 200px;
  border: 3px solid #c9c9c9;
  font-size: 24pt;
  margin: 5px;
  color: #969696;
}

input[type="submit"]:hover {
  color: white;
  background-color: #969696;
  transition: color 0.2s 0.05s ease;
  transition: background-color 0.2s 0.05s ease;
  cursor: pointer;
}

<input type="submit" name="submit" onClick="window.location= 'http://example.com'">

在这里工作的JSFiddle 。

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

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

例：

<form method="POST" action="/SomePath">
  <input type="text" name="somefield" />
  <a href="www.target.com"><button type="button">Go to Target!</button></a>
  <button type="submit">submit form</button>
</form>

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

请注意确保按钮不会触发任何操作，因为这将导致冲突。同样，正如Arius指出的那样，您应该意识到，由于上述原因，根据标准，严格来讲，这并不是有效的HTML。但是，它确实可以在Firefox和Chrome中正常运行，但是我尚未针对Internet Explorer对其进行测试。

您可以使用javascript：

<html>
<button onclick='window.location = "http://www.google.com"'>
            Google
        </button>

</html>

替换http://www.google.com为您的网站，确保http://在URL之前添加。

在JavaScript中

setLocation(base: string) {
  window.location.href = base;
}

在HTML中

<button onclick="setLocation('/<whatever>')>GO</button>"

输入window.location并enter在浏览器控制台中按。然后您可以清楚地知道location其中包含

   hash: ""
   host: "stackoverflow.com"
   hostname: "stackoverflow.com"
   href: "/programming/2906582/how-to-create-an-html-button- 
   that-acts-like-a-link"
   origin: "https://stackoverflow.com"
   pathname: "/questions/2906582/how-to-create-an-html-button-that-acts-like-a-link"
   port: ""
   protocol: "https:"

您可以从此处设置任何值。

因此，对于重定向另一个页面，您可以href使用链接设置值。

   window.location.href = your link

就您而言

   <button onclick="window.location.href='www.google.com'">Google</button>

如果您需要的是看起来像一个按钮，重点放在渐变图像上，则可以执行以下操作：

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

如果要重定向到网站中的页面，则这是我的方法-我将属性href添加到按钮，然后onclick将this.getAttribute（'href'）分配给document.location.href

**如果您由于“ X-Frame-Options”到“ sameorigin”而引用域外的网址，则无法使用。

样例代码：

<button onclick="document.location.href=this.getAttribute('href');" href="/">Home</button>