如何创建像链接一样的超文本标记语言按钮？

如何创建像链接一样的超文本标记语言按钮？因此单击按钮将用户重定向到页面。

我希望它是可访问的，并且URL中的额外字符或参数最少。

8981397 次浏览
小开
最佳答案

超文本标记语言

纯超文本标记语言的方法是将其放在<form>中，其中您在action属性中指定所需的目标URL。

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

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

您直观地期望能够使用<button href="https://google.com">与<a>元素类似，但不幸的是没有，根据超文本标记语言规范，这个属性不存在。

css

如果允许使用CSS，只需使用<a>，您将其样式设置为看起来像使用#1属性（仅在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>元素允许子元素。

小开 
<form><input type="button" value="Home Page" onclick="window.location.href='http://www.wherever.com'"></form>
小开

做到这一点的唯一方法（除了BalusC巧妙的表单想法！）是向按钮添加JavaScriptonclick事件，这对可访问性不好。

您是否考虑过将普通链接设置为按钮？您无法以这种方式实现OS特定的按钮，但它仍然是IMO的最佳方式。

小开

用途：

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

不幸的是，此标记在HTML5中不再有效并且既不会验证也不会总是像预期的那样工作。

小开 

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

请注意，type="button"属性很重要，因为其缺失值默认为提交按钮状态。

小开

如果它是您在基本超文本标记语言锚标记中寻找的按钮的视觉外观，那么您可以使用twitter Bootstrap框架来格式化以下任何常见的超文本标记语言类型链接/按钮以显示为按钮。请注意框架版本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）样例外观：

Boostrap v4按钮的示例输出

Bootstrap（v3）样例外观：

Boostrap v3按钮的示例输出

Bootstrap（v2）样例外观：

Boostrap v2按钮的示例输出

小开

如果要创建用于任何位置的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;}
小开

与其他一些人添加的内容一起，您可以使用一个简单的CSS类，没有PHP，没有jQuery代码，只有简单的超文本标记语言和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>

就是这样。它很容易做到，让你像你想要的那样有创造力。你可以控制颜色、大小、形状（半径）等。有关更多详细信息，请参阅我找到这个的网站。

小开

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

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

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

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

小开

它实际上非常简单，不使用任何表单元素。您只需使用 标签，其中包含一个按钮：）。

像这样：

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

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

编辑

几年后，虽然我的解决方案仍然有效，但请记住，您可以使用大量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

小开

如果你想避免使用表单或输入，并且你正在寻找一个看起来像按钮的链接，你可以使用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包装显示：块可以轻松居中（使用边距：0自动）和定位（而 是内联的，更难定位，无法居中）。

  1. 你可以只使 显示：块，移动它，并将其样式设置为按钮，但随后垂直对齐它内部的文本变得困难。

  2. 这允许您制作 显示：inline-table和

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

    上使用ververing-对齐：中间并将其垂直居中（这在按钮上总是很好）。是的，你可以使用填充，但如果你想让你的按钮动态调整大小，那就不那么干净了。

  3. 有时当您在div中嵌入 时，只有文本是可点击的，这种设置使整个按钮都是可点击的。

  4. 如果你只是想移动到另一个页面，你不需要处理表单。表单是用来输入信息的，它们应该为此而保留。

  5. 允许您干净地将按钮样式和文本样式彼此分离（拉伸优势？当然，但是CSS看起来很糟糕，所以分解它很好）。

它绝对使我的生活更轻松地为可变大小的屏幕设计移动网站。

小开

对于超文本标记语言5和样式按钮以及图像背景

<a id="Navigate" href="http://www.google.com"><inputtype="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>

小开

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

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

我把它用在我目前正在开发的一个网站上，效果很好！如果你也想要一些很酷的样式，我会把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'">

A working JSFiddle is here.

小开

您还可以将按钮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>

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

小心确保按钮不会触发任何操作，因为这将导致冲突。同样作为阿里乌斯指出，您应该知道，由于上述原因，根据标准，严格来说，这不是有效的超文本标记语言。然而，它确实在Firefox和Chrome中按预期工作，但我还没有在Internet Explorer上测试它。

小开

如果您使用的是内部表单，请将属性type="重置"与按钮元素一起添加。它将阻止表单操作。

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

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

  1. 使用OP开头的<form method="get">方法。这非常有效，但有时会将?附加到URL。?是主要问题。
  2. 此解决方案在不启用JavaScript的情况下工作。不过，回退将在URL的末尾添加?。
  3. 如果启用了JavaScript，那么您可以使用jQuery/JavaScript来处理链接，这样?就不会最终附加到URL中。对于没有启用JavaScript的极少数用户，它将无缝回退到<form>方法。
  4. JavaScript代码使用事件委托，因此您可以在<form>或<button>存在之前附加事件侦听器。在这个例子中我使用jQuery，因为它快速简单，但也可以在“vanilla”JavaScript中完成。
  5. 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 formvar 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" role="link">Link</button></form></body></html>

小开

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

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

警告

  • 必须被<form>标签包围。
  • <button>类型必须是“提交”（或未指定）-我无法让它与类型“按钮”一起工作。
  • 覆盖窗体中的默认操作。换句话说，如果您在另一个窗体中执行此操作，将导致冲突。

参考：格式操作

浏览器支持：<按钮>：按钮元素

小开

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

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

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

但问题是，在一些流行的浏览器版本中，如Chrome，Safari和Internet Explorer，它会在URL的末尾添加一个问号字符。换句话说，对于URL上方的代码，最终会是这样的：

http://someserver/pages2?

有一种方法可以解决这个问题，但它需要服务器端配置。使用ApacheMod_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和其他事件，以使用按钮模仿链接的行为。下面的示例可以从超文本标记语言中改进和删除，但它只是为了说明这个想法：

<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（像纽扣一样的锚）是一个很好的替代方案，以最小的可用性影响解决此问题。

小开

你也可以使用一个按钮：

例如，在ASP.NET核心语法中：

// 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>
小开

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

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

https://jsfiddle.net/hj6gob8b/

小开

对于尼古拉斯的回答，以下内容对我有用，因为该答案没有type="button"，因此它开始表现为提交类型……因为我已经有一个提交类型了。它对我不起作用……现在你可以向按钮或<a>添加一个类来获得所需的布局：

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

只需将按钮放在引用标签内，例如，

<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=xxxxxxxxxxxxxxxx，x是由您自己的连接确定的，所以显然它不等于我的。

我似乎在陈述一些非常基本的观点，但我只想尽我所能解释。

小开

您可以使用JavaScript：

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

将http://www.google.com替换为您的网站，并确保在URL之前包含http://。

小开

七种方法做到这一点：

  1. 使用window.location.href = 'URL'
  2. 使用window.location.replace('URL')
  3. 使用window.location = 'URL'
  4. 使用window.open('URL')
  5. 使用window.location.assign('URL')
  6. 使用超文本标记语言形式
  7. 使用超文本标记语言锚 tag

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

小开

在javascript

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

超文本标记语言

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

键入window.location并在浏览器控制台中按输入。然后您可以清楚地了解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>
小开

如果您使用SSL证书：

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

如果您使用的是CSS库或主题，只需将按钮的类应用于锚点/链接标记。

下面是一个一个UI的例子：

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

使用<a>标签创建一个按钮并添加适当的CSS内容：

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

小开

超文本标记语言：如果你想创建一个超文本标记语言按钮，就像一个链接，使用它的两个常见属性：<a>和/或action=""：

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

或者…

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

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

小开

如果您想创建一个充当链接的按钮，有多种方法可以做到这一点。选择最适合您的情况的一种。下面的代码在按钮内创建一个链接。

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

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

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

Or maybe add event listeners

document.querySelector("#btn").addEventListener('click', open('www.google.com'))
<button id="btn">Go to Google</button>

There are many ways you can do this, but this is only three small examples of buttons that act like a link. In other words, buttons that open up links.

小开

Bootstrap方法也适用于布尔玛。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.min.css"><a href="https://www.stackoverflow.com" class="button is-primary">Stack Overflow</a>

小开

如果您使用使用React-Bootstrap开发，您可以使用：

<Button href="#">Link</Button>

添加href prop将自动呈现<a />元素。

小开

这里的解决方案都不适合我，所以在尝试了所有这些之后，我最终得到了一些琐碎的东西：仅限超文本标记语言（没有表单提交），没有CSS，没有JS：

<a href="/link"><button>Link</button></a>

提交答案