如何创建像链接一样的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>

其他回答

如果要创建用于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;
}

如果您在基本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">

引导(v4)示例外观:

引导(v3)示例外观:

引导(v2)示例外观:

还可以使用按钮:

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

<button onclick=“location.href='http://www.example.com'“type=”按钮“>www.example.com</button>

请注意,type=“button”属性很重要,因为它缺少的默认值是SubmitButton状态。

对于HTML 5和带有图像背景的样式按钮

<a id=“Navigate”href=“http://www.google.com"><输入type=“按钮”id=“导航按钮”style=“背景图像:url(http://cdn3.blogsdna.com/wp-content/uploads/2010/03/Windows-Phone-7-Series-Icons-Pack.png);背景重复:无重复;背景位置:-272px-112px;光标:指针;高度:40px;宽度:40px;边框半径:26px;边框样式:实心;边框颜色:#000;边框宽度:3px;“title=”导航“/></a>