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

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

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

当前回答

还可以使用按钮：

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

2016-11-21 13:07:00

其他回答

您还可以将buttons类型属性设置为“button”（它使其不提交表单），然后将其嵌套在链接中（使其重定向用户）。

这样，如果需要，您可以在同一表单中有另一个按钮来提交表单。我还认为，在大多数情况下，这比将表单方法和动作设置为链接更可取（除非我猜是搜索表单…）

例子：

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

小心确保按钮不会触发任何动作，否则会导致冲突。同样，正如Arius所指出的，您应该意识到，出于上述原因，根据标准，严格来说，这并不是有效的HTML。不过，它在Firefox和Chrome中确实可以正常工作，但我还没有在Internet Explorer中测试过它。

2014-12-10 15:21:15

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

2014-11-16 01:39:53

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

2014-07-23 08:50:29

随着其他一些人的添加，您可以使用一个简单的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>

就是这样。这很容易做到，让你随心所欲地发挥创造力。您可以控制颜色、大小、形状（半径）等。有关详细信息，请参阅我在网站上找到的。

2013-12-03 05:09:21

Bootstrap方法也适用于Bulma。

2021-09-22 19:42:43

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

推荐文章

最新文章

标签