Question

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

我也很喜欢，所以URL中没有任何额外的字符或参数。

我怎样才能做到这一点？

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

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

但问题在于Safari和Internet Explorer，它会在网址末尾添加一个问号字符。我需要找到一个不会在URL末尾添加任何字符的解决方案。

还有另外两种解决方案可以做到这一点：使用JavaScript或设置链接样式看起来像一个按钮。

使用JavaScript：

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

但这显然需要JavaScript，因此屏幕阅读器无法访问它。链接的要点是转到另一个页面。因此，尝试使按钮像链接一样是错误的解决方案。我的建议是你应该使用一个链接和style it to look like a button。

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

Answer 1

HTML

纯HTML格式是将其放在<form>中，您可以在action属性中指定所需的目标网址。

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

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

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

CSS

如果允许使用CSS，只需使用您设置的<a>看起来像一个按钮，使用appearance属性（only Internet Explorer support is currently (July 2015) still poor）。

<a href="http://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="http://google.com" class="btn btn-default">Go to Google</a>

的JavaScript

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

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

Answer 2

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

Answer 3

如果它是您在基本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)样品外观：

Sample output of Boostrap v4 buttons

Bootstrap (v3)样品外观：

Sample output of Boostrap v3 buttons

Bootstrap (v2)样品外观：

Sample output of Boostrap v2 buttons

Answer 4

使用：

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

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

Answer 5

从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/Element/button#Browser_compatibility

Answer 6

它非常简单，不使用任何表格元素。你可以使用＆lt; a＆gt;标签内有一个按钮:)。

像这样：

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

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

Answer 7

如果您使用的是内部表单，请添加属性 type =“reset”以及按钮元素。它会阻止表单操作。

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

Answer 8

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

Answer 9

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

解决方案1：表单中的按钮。

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

但问题在于，在某些版本的热门浏览器（如Chrome，Safari和Internet Explorer）中，它会在网址末尾添加一个问号字符。换句话说，对于上面的代码，您的网址最终会如下所示：

http://someserver/pages2?

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

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

类似的配置可能因Web服务器和使用的堆栈而异。所以这个方法的摘要：

优点：

这是一个真正的按钮，在语义上它是有道理的。
由于它是一个真正的按钮，它也会像一个真正的按钮（例如拖动行为和/或在活动时按空格键时模仿点击）。
没有JavaScript，不需要复杂的样式。

缺点：

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

解决方案2：使用JavaScript。

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

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

优点：

简单（基本要求）并保持语义而不需要额外的表格。
由于它是一个真正的按钮，它也会像一个真正的按钮（例如拖动行为和/或在活动时按空格键时模仿点击）。

缺点：

需要JavaScript，这意味着不太容易访问。这对于基础（核心）元素（如链接）来说并不理想。

解决方案3：锚点（链接）的样式就像一个按钮。

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

优点：

简单（基本要求）和良好的跨浏览器支持。
不需要<form>工作。
不需要使用JavaScript。

缺点：

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

结论

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

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

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

Answer 10

您只需在元素周围添加一个标记：

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

https://jsfiddle.net/hj6gob8b/

Answer 11

做以下事情是否有任何缺点？

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

a.nostyle是一个具有链接样式的类（可以摆脱标准链接样式），而span.button是一个具有“按钮”样式的类（背景，边界，渐变等。）。

Answer 12

与其他一些人添加的东西一样，你可以疯狂地使用一个简单的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。

Answer 13

为什么不将按钮放在参考标记之内，例如

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

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

Answer 14

执行此操作的唯一方法（除了BalusC的巧妙形式的想法！）是通过向按钮添加JavaScript onclick事件，这对于辅助功能不利。

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

Answer 15

@ Nicolas，以下为我工作，因为你没有type="button"因为它开始表现为提交类型..因为我已经有一个提交类型。这对我不起作用... 。现在你可以将类添加到按钮或<a>以获得所需的布局：

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

Answer 16

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

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

h1

然后在CSS中，你的样式应该是这样的：

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

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

此设置的好处： 1.制作div包装器显示：块使其易于居中（使用margin：0 auto）和位置（而＆lt; a＆gt;是内联的，更难定位且无法居中）。

你可以制作＆lt; a＆gt;显示：阻止，移动它，并将其设置为按钮，但然后在其中垂直对齐文本变得很难。
这允许您制作＆lt; a＆gt; display：inline-table和＆lt; h1＆gt; display：table-cell，允许你在＆lt; h1＆gt;上使用vertical-align：middle。并垂直居中（按钮上总是很好）。是的，你可以使用填充，但如果你想让你的按钮动态调整大小，那就不会那么干净了。
有时当您嵌入＆lt; a＆gt;时在div中，只有文本是可点击的，这个设置使整个按钮可以点击。
如果您只是想移动到另一个页面，则不必处理表单。表格用于输入信息，应该为此保留。
允许您干净地将按钮样式和文本样式相互分开（拉伸优势？当然，但CSS可以看起来很讨厌，所以分解它很好。）
< / LI>
这绝对让我的生活更容易为可变尺寸的屏幕设计移动网站。

Answer 17

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

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

Answer 18

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

Answer 19

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

使用OP开始的<form method="get">方法。这非常有效，但它有时会在URL中添加?。 ?是主要问题。
使用jQuery / JavaScript在启用JavaScript时执行以下链接，以便?不会最终附加到网址。对于没有启用JavaScript的极少数用户，它会无缝回退到<form>方法。
JavaScript代码使用事件委派，因此您可以在<form>或<button>之前附加事件侦听器。我在这个例子中使用了jQuery，因为它快速而简单，但它可以在＆＃39; vanilla＆＃39;中完成。 JavaScript也是如此。
JavaScript代码会阻止默认操作发生，然后遵循<form> action属性中提供的链接。

JSBin Example (code snippet can't follow links)

＆＃13;

// 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;
});

＆＃13;

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

＆＃13;

Answer 20

适用于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>

Answer 21

您也可以使用按钮：

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

Answer 22

7种方法：

使用window.location.href = 'URL'
使用window.location.replace('URL')
使用window.location = 'URL'
使用window.open('URL')
使用window.location.assign('URL')
使用HTML 表单
使用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>

Answer 23

我将此用于我目前正在处理的网站，效果很好！如果你想要一些很酷的造型我也会把CSS放在这里。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

使用JSFiddle here。

Answer 24

如果您使用的是SSL证书

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

Answer 25

在<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 Fiddle

Answer 26

您可以使用javascript：

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

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

Answer 27

您还可以将按钮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测试它。

Answer 28

尝试

.abutton { 
  background: #bada55; padding: 5px; border-radius: 5px; 
  transition: 1s; text-decoration: none; color: black;
}
.abutton:hover { background: #2a2;  }

<a href="https://example.com" class="abutton">Continue</a>

Answer 29

如果您想重定向网站中的网页，那么请点击此处 - 我的方法 - 我已将 href 属性添加到按钮，然后将 this.getAttribute（＆＃39; href＆＃39;）分配给document.location.href < / p>

**如果您因为“X-Frame-Options＆＃39; X-Frame-Options＆＃39;＆＃39; X-Frame-Options＆＃39;引用您网域外的网址，它将无法运行。到＃sameorigin＆＃39;。

示例代码：

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

Answer 30

如果你需要的是它看起来像一个按钮，强调渐变图像，你可以这样做：

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

Answer 31

在JavaScript中

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

在HTML

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

Answer 32

输入window.location，然后在浏览器控制台中按enter。然后您可以清楚地了解location包含的内容

   hash: ""
   host: "stackoverflow.com"
   hostname: "stackoverflow.com"
   href: "https://stackoverflow.com/questions/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>

Answer 33

如果您使用的是CSS库或主题，只需将按钮的类应用于anchor / link标记即可。

以下是OneUI的示例

  <a  class="btn-block-option" href="">
    <i class="si si-reload"></i>
  </a>

Answer 34

HTML 答案：如果您想创建一个类似于链接的 HTML 按钮，请为其使用两个常用属性：<a> 和/或 action=""：< /p>

<form action="stackoverflow.com"/>
   <button type="submit" value="Submit Form"

或者...

"href" 是 <a> 属性的一部分。它有助于直接链接：

<a href="stackoverflow.com">Href</a>

Answer 35

如果您想创建一个用作链接的按钮，您可以通过多种方式来实现。选择最适合您情况的一种。下面的代码在按钮内创建一个链接。

<button>
  <a href="www.google.com">Go to Google</a>
</button>

第二种方式是点击按钮时打开一个新窗口

<button onclick="open('www.google.com')">Google</button>

或者添加事件监听器

document.querySelector("#btn").addEventListener('click', open('www.google.com'))

<button id="btn">Go to Google</button>

有很多方法可以做到这一点，但这只是充当链接的按钮的三个小例子。换句话说，就是打开链接的按钮。

Answer 36

最简单的方法是创建超链接：

<a href="https://google.com">Test</a>

然后添加按钮元素：

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

大功告成！我建议你在开始之前学习 HTML 课程

如何创建一个像链接一样的HTML按钮？

36 个答案:

HTML

CSS

的JavaScript

解决方案1：表单中的按钮。

解决方案2：使用JavaScript。

解决方案3：锚点（链接）的样式就像一个按钮。

结论

JSBin Example (code snippet can't follow links)