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

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


当前回答

Bootstrap方法也适用于Bulma。

<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“>堆栈溢出</a>

其他回答

在<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公司

您可以简单地在元素周围放置标记:

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

https://jsfiddle.net/hj6gob8b/

在JavaScript中

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

HTML格式

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

我在一个我目前正在开发的网站上使用了这个,效果很好!如果你也想要一些很酷的样式,我会把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在这里。

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