HTML按钮链接到另一个页面

在HTML中，可以通过一个按钮（button）来创建一个链接（link）连接到另一个页面。这个按钮链接可以用来作为一个导航按钮或者用来执行某个特定的操作。

创建一个按钮链接

我们可以通过在HTML中使用一个按钮和一个链接来创建一个按钮链接。下面是一个基本的例子：

<button onclick="location.href='http://www.example.com';">按钮链接</button>

在这个例子中，按钮用于触发链接。onlick属性定义了一个JavaScript函数，它将页面重定向到指定的链接。

设计和样式

在按钮链接中，我们可以使用各种样式和设计选项来使其更加具有吸引力和交互性。以下是几个可供选择的示例：

设计选项1

<button class="btn-link" onclick="location.href='http://www.example.com';">按钮链接</button>

<style>
  .btn-link {
    background-color: transparent;
    color: blue;
    border: none;
    padding: 0;
    font-size: inherit;
    cursor: pointer;
    text-decoration: underline;
  }
  
  .btn-link:hover {
    color: red;
  }
</style>

在这个例子中，我们使用CSS样式表定义了一个类名 btn-link，并将其应用于按钮上。我们还定义了按钮的属性，比如背景色、颜色、边框、内边距、字体大小、鼠标光标和文本装饰等。鼠标移到按钮上时，链接的颜色也会自动更改。

设计选项2

<button class="btn-link" onclick="location.href='http://www.example.com';">
  <i class="fa fa-arrow-right"></i>按钮链接
</button>

<style>
  .btn-link {
    background-color: #fff;
    color: #337ab7;
    border: 2px solid #337ab7;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    border-radius: 5px;
  }
  
  .btn-link:hover {
    background-color: #337ab7;
    color: #fff;
    border-color: #337ab7;
  }
  
  .fa {
    margin-right: 5px;
  }
</style>

<script src="https://use.fontawesome.com/releases/v5.15.3/js/all.js" crossorigin="anonymous"></script>

在这个例子中，我们使用了FontAwesome图标库来对按钮进行了修改。我们定义了一个类名 btn-link，并在其中应用了一些属性，比如背景色、颜色、边框、内边距、字体大小、光标、文本装饰、显示类型和边角半径等。鼠标移到按钮上时，链接会自动更改，通过FontAwesome图标库，我们还在按钮前面添加了一个漂亮的箭头。

结论

HTML按钮链接是一种非常简单但非常有用的技术，可以使您的网站更加具有交互性和吸引力。以上是两个示例设计，当然，我们也可以根据您的具体需求进行适当的设计和修改。