如何清除HTML按钮中的黑色破折号？

Question

我不知道如何描述我的问题，但是看看我的输出，您会发现一个主意。一世 用谷歌搜索我的问题，但找不到解决方案。

.btn1 {
  font-family: 'Times New Roman', Times, serif;
  margin-right: 0px;
  width: 100px;
  height: 30px;
  font-size: 17px;
  font-weight: 200;
  background-color: #f7e7e7;
  color: rgb(49, 126, 126);
  border-radius: 5px;
  border: 1px solid rgb(186, 230, 173);
  box-shadow: 3px 3px rgb(98, 151, 98);
}

<div>
  <a href="#">
    <button class="btn1">Home</button>
  </a>
  <a href="product.html">
    <button class="btn2">Products</button>
  </a>
  <a href="#">
    <button class="btn3">Buy Now</button>
  </a>
  <a href="findus.html">
    <button class="btn4">Find us</button>
  </a>
</div>

每个按钮在CSS中都有相同的代码。 您能告诉我我在做什么错吗？ 谢谢。

Answer 1

您不必要地将每个<button>包裹在<a>标记中，这是浏览器默认的<a>标记下划线样式。

注意：其他一些答案建议仅隐藏下划线，而将<button>包裹在<a> is considered to be an anti-pattern that should be avoided.

中

链接

.btn1 {
  font-family: 'Times New Roman', Times, serif;
  margin-right: 0px;
  width: 100px;
  height: 30px;
  font-size: 17px;
  font-weight: 200;
  background-color: #f7e7e7;
  color: rgb(49, 126, 126);
  border-radius: 5px;
  border: 1px solid rgb(186, 230, 173);
  box-shadow: 3px 3px rgb(98, 151, 98);
  text-decoration: none;
}

<div>
  <a class="btn1" href="#">Home</a>
  <a class="btn1" href="product.html">Products</a>
  <a class="btn1" href="#">Buy Now</a>
  <a class="btn1" href="findus.html">Find us</a>
</div>

按钮

.btn1 {
  font-family: 'Times New Roman', Times, serif;
  margin-right: 0px;
  width: 100px;
  height: 30px;
  font-size: 17px;
  font-weight: 200;
  background-color: #f7e7e7;
  color: rgb(49, 126, 126);
  border-radius: 5px;
  border: 1px solid rgb(186, 230, 173);
  box-shadow: 3px 3px rgb(98, 151, 98);
}

<div>
  <button class="btn1">Home</button>
  <button class="btn2">Products</button>
  <button class="btn3">Buy Now</button>
  <button class="btn4">Find us</button>
</div>

您可以阅读有关links vs buttons的信息，以及在这里为何选择其中一个的理由。

Answer 2

您看到的破折号实际上是锚元素随附的默认下划线。您需要添加的只是：

a {
  text-decoration: none;
}

话虽这么说，但应避免将按钮元素嵌套在锚元素this中。

Answer 3

用按钮替换become: ubuntu或使用CSS规则a

Answer 4

.btn {
  font-family: "Times New Roman", Times, serif;
  margin: 10px;
  padding:10px;
  width: 100px;
  height: 30px;
  font-size: 17px;
  font-weight: 200;
  background-color: #f7e7e7;
  color: rgb(49, 126, 126);
  border-radius: 5px;
  border: 1px solid rgb(186, 230, 173);
  box-shadow: 3px 3px rgb(98, 151, 98);
}

a
{
  text-decoration:none;
  color: black;
}

<div>
  <a href="#" class="btn">
    Home
  </a>
  <a href="product.html" class="btn">
   Product
  </a>
  <a href="#" class="btn">
   buy now
  </a>
  <a href="findus.html" class="btn">
    find us
  </a>
</div>