html - 添加 URL 重定向到按钮组按钮

Question

我能够使用 CSS 创建水平按钮组。我的按钮组设计与发现的非常相似 here .

我一直在搜索并尝试各种方法来使这些按钮成为可点击的链接，这些链接将重定向到另一个页面，例如，每个页面都有自己的 URL。但是，我还没有找到有效的解决方案。

如何将组中的按钮制作成可点击的链接或以其他方式在点击时重定向到另一个页面/站点？

提前致谢!

Answer 1

<button>元素不打算具有“href”属性。为此，您可以使用 <a>带有“href”属性的标签，并将其设置为与您的按钮相似

例如:

div.container {
    padding: 10px;
}

a.button {
    color: #2196f3;
    text-decoration: none;
    padding: 10px;
    border: 1px solid #2196f3;
    border-radius: 3px;
    background-color: #fff;
    transition: all .3s;
    -webkit-transition: all .3s; /* safari */
    -moz-transition: all .3s; /* mozilla */
    -ms-transition: all .3s; /* IE */
    -o-transition: all .3s; /* opera */
}

a.button:hover,
a.button:focus,
a.button:active {
    background-color: #2196f3;
    color: #fff;
}

<div class="container">
  <a href="#" class="button">Styled Anchor Button</a>
</div>