如何创建像链接一样的HTML按钮?因此,单击该按钮可将用户重定向到页面。

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


当前回答

我在一个我目前正在开发的网站上使用了这个,效果很好!如果你也想要一些很酷的样式,我会把CSS放在这里。

输入[类型=“提交”]{背景色:白色;宽度:200px;边框:3px实心#c9c9c9;字体大小:24pt;边距:5px;颜色:#969696;}input[type=“submit”]:悬停{颜色:白色;背景色:#969696;过渡:颜色0.2s 0.05s容易;过渡:背景色0.2s 0.05s轻松;光标:指针;}<input type=“submit”name=“submit”onClick=“window.location=”http://example.com'">

一个正在工作的JSFiddle在这里。

其他回答

在JavaScript中

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

HTML格式

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

对于Nicolas的回答,以下内容对我有用,因为该回答没有type=“button”,因此它开始表现为提交类型。。。因为我已经有一个提交类型。这对我不起作用。。。现在,您可以向按钮或<a>添加一个类以获得所需的布局:

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

在浏览器控制台中键入window.location并按Enter键。然后,您可以清楚地知道位置包含:

   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>

HTML

简单的HTML方式是将其放在一个<form>中,其中在action属性中指定所需的目标URL。

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

如果需要,设置CSS显示:inline;以使其与周围文本保持一致。您也可以使用<button type=“submit”>来代替上面示例中的<input type=“提交”>。唯一的区别是<button>元素允许子级。

您可以直观地期望能够使用<button href=“https://google.com“>类似于<a>元素,但不幸的是,根据HTML规范,该属性不存在。

CSS

如果允许使用CSS,只需使用一个<a>,您可以使用外观属性(这在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>元素允许子级。

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

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

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

请记住,规范中说这是无效的,因为按钮不应包含任何交互式后代。