如何创建一个类似于链接的HTML按钮？

If what you need is that it will look like a button, with emphasis on the gradient image, you can do this:

<a href="www.yourlink.com" class="btn btn-gradient"><i class="fa fa-home"> Button Text</i></a>

For HTML 5 and styled button along with image background

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

if you are using SSL Certificate

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

Also you can use a button:

For example, in ASP.NET Core syntax:

// 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>

If you want to create a button that is used for a URL anywhere, create a button class for an anchor.

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

您可以简单地在元素周围放置一个标签：

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

https://jsfiddle.net/hj6gob8b/

采用：

<a href="http://www.stackoverflow.com/">
    <button>Click me</button>
</a>

不幸的是，此标记在HTML5中不再有效，并且既不会验证也不总是能按预期工作。使用另一种方法。

如果这是您在基本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）示例外观：

实际上，它非常简单，并且不使用任何表单元素。您可以只在<a>标记内使用一个按钮：)。

像这样：

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

它将把href加载到同一页面。想要一个新页面？只需使用target="_blank"。

编辑

几年后，尽管我的解决方案仍然有效，但是请记住，您可以使用很多CSS使其外观如您所愿。这只是一种快速的方法。