Question

我能够使用CSS创建一个水平按钮组。我的按钮组的设计与here找到的非常相似。

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

如何将组中的按钮制作成可点击的链接，或者在点击时重定向到其他页面/网站？

提前致谢！

Answer 1

＆＃13;

.btn-group {
    background-color: #4CAF50; /* Green background */
    border: 1px solid green; /* Green border */
    color: white; /* White text */
    padding: 10px 24px; /* Some padding */
    cursor: pointer; /* Pointer/hand icon */
    float: left; /* Float the buttons side by side */
    text-decoration: none;
}


.btn-group a:not(:last-child) {
    border-right: none; /* Prevent double borders */
}

/* Add a background color on hover */
.btn-group:hover {
    background-color: #3e8e41;
}

＆＃13;

<h1>Button Group</h1>

<div>
  <a href="https://www.google.com" target="_blank"><button class="btn-group">Apple</button></a>
  <a href="https://www.google.com" target="_blank"><button class="btn-group">Samsung</button></a>
</div>

＆＃13;

Answer 2

<button>个元素并非旨在拥有＆＃34; href＆＃34;属性。为实现此目的，您可以使用带有＆＃34; href＆＃34;的<a>标记。属性和样式显示类似于按钮

例如：

＆＃13;

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

＆＃13;

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

＆＃13;

将URL重定向添加到按钮组按钮

2 个答案: