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

Question

我想创建一个像按钮一样的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>

Answer 1

HTML

简单的HTML方法是将其放在一个中<form>,您可以在action属性中指定所需的目标URL .

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

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

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

CSS

如果允许使用CSS,只需使用<a>您使用的样式看起来像按钮,使用appearance属性(目前只有Internet Explorer支持(2015年7月)仍然很差).

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

或者选择其中一个像Bootstrap这样的CSS库.

<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)样本外观:

Bootstrap(v3)样本外观:

Bootstrap(v2)样本外观:

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 /元/按钮#Browser_compatibility

Answer 6

它实际上非常简单,不使用任何表格元素.您可以使用带有按钮的<a>标签:).

像这样:

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

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

Answer 7

如果您使用的是内部表单,请添加属性type ="reset"以及button元素.它会阻止表单操作.

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

Answer 8

这个问题似乎有三种解决方案(都有利弊).

解决方案1:表单中的按钮.

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

但问题在于,在某些版本的流行浏览器(如Chrome,Safari和Internet Explorer)中,它会在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的hack(在某些情况下)来修复,但干净的方法是使用服务器端重定向.服务器端重定向的缺点是,由于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(Anchor样式像按钮)是一个很好的替代方案,解决这个问题,可用性影响最小.

Answer 9

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

Answer 10

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

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

https://jsfiddle.net/hj6gob8b/

Answer 11

为什么不将您的按钮放在参考标签内,例如

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

这对我来说似乎很有效,并且不会向链接添加任何%20标签,只是你想要它.我使用谷歌链接来演示.

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

链接另一个本地文件时,只需将其放在同一文件夹中,然后添加文件名作为参考.如果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,你将拥有自己的端口号.

此外,？_ijt = xxxxxxxxxxxxxx在main.html URL的末尾,x由您自己的连接决定,所以显然不会等于我的.

看起来我可能会说出一些非常基本的观点,但我只是想尽可能地解释一下.感谢您的阅读,我希望至少能帮到别人.快乐的编程.

Answer 12

唯一的方法(除了BalusC的巧妙形式的想法!)是通过向onclick按钮添加一个JavaScript 事件,这对于可访问性来说是不利的.

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

Answer 13

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

这就对了.这很容易做到,让你像你一样有创意.您可以控制颜色,大小,形状(半径)等.有关详细信息,请参阅我在此处找到的网站.

Answer 14

如果你想避免使用表单或输入,并且你正在寻找一个看起来像按钮的链接,你可以使用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;
}

然后在CSS中,您的样式应如下所示:

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

这是一个jsFiddle来检查它并玩它.

这种设置的好处:1.使div包装器显示:块使其易于居中(使用margin:0 auto)和位置(而<a>是内联的,更难定位,不可能居中).

2. 你可以只做<a>显示:阻止,移动它,并将其设置为按钮,但然后垂直对齐它内部的文本会变得很难.

3. 这允许你制作<a> display:inline-table和<h1> display:table-cell,它允许你在<h1>上使用vertical-align:middle并垂直居中(这总是很好的一个按钮).是的,您可以使用填充,但如果您希望您的按钮动态调整大小,那将不会那么干净.

4. 有时,当您在div中嵌入<a>时,只有文本是可点击的,此设置使整个按钮可单击.

5. 如果您只是想移动到另一个页面,则不必处理表单.表单用于输入信息,应该为此保留.

6. 允许您干净地将按钮样式和文本样式相互分开(伸展优势？当然,但CSS可能看起来很讨厌,因此分解它很好).

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

Answer 15

@ Nicolas,以下为我工作,因为你没有type="button"因为它开始表现为提交类型..因为我已经有一个提交类型.它没有为我工作....现在你可以添加类按钮或<a>获得所需的布局:

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

Answer 16

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

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

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

Answer 17

如果要在任何位置创建用于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 18

我知道已经提交了很多答案,但它们似乎都没有真正解决问题.以下是我对解决方案的看法:

1. 使用<form method="get">OP开始的方法.这非常有效,但它有时会附加?到URL.这?是主要问题.
2. 使用jQuery/JavaScript在启用JavaScript时执行以下链接,以便?最终不会附加到URL.<form>对于没有启用JavaScript的极小部分用户,它将无缝回退到该方法.
3. JavaScript代码使用事件代表团,因此您可以将之前的附加事件侦听器<form>或者<button>甚至存在.我在这个例子中使用jQuery,因为它快速而简单,但它也可以用'vanilla'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>

Answer 19

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>

Answer 20

使用标签创建一个按钮<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>

Answer 21

对于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>