从文本中删除蓝色突出显示

Question

我使用自定义CSS按钮。每当我在它周围盘旋时，它会在按钮内的文本下方获得蓝色突出显示（更像是蓝色下划线）。虽然我付出了很多努力，但似乎无法弄清楚它似乎是徒劳的。

这是我的代码：

＆＃13;

＆＃13;

.btn {
  box-sizing: border-box;
  appearance: none;
  background-color: transparent;
  border: 2px solid #e74c3c;
  border-radius: 0.6em;
  color: #e74c3c;
  cursor: pointer;
  display: flex;
  align-self: center;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  margin: 20px;
  padding: 1.2em 2.8em;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
}

.btn:hover,
.btn:focus {
  color: #fff;
  outline: none !important;
}

.second {
  border-radius: 3em;
  border-color: #ec6800;
  color: #FFF;
  background: #ec6800;
  background-position: 0 0;
  background-size: 200%;
  transition: background 150ms ease-in-out, color 150ms ease-in-out;
}

＆＃13;

<nav class="navbar navbar-custom">
  <div class="container">

    <ul class="nav navbar-nav navbar-right">
      <a href="signup.php"><button class="btn second">SIGN UP</button></a>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <a href="signup.php"><button class="btn sixth">LOG IN</button></a>
    </ul>

  </div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

a{
  text-decoration: none !important;
}
.nav a{
  text-decoration: none !important;
}
.btn {
  box-sizing: border-box;
  appearance: none;
  background-color: transparent;
  border: 2px solid #e74c3c;
  border-radius: 0.6em;
  color: #e74c3c;
  cursor: pointer;
  display: flex;
  align-self: center;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  margin: 20px;
  padding: 1.2em 2.8em;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
}

.btn:hover,
.btn:focus {
  color: #fff;
  outline: none !important;
}

.second {
  border-radius: 3em;
  border-color: #ec6800;
  color: #FFF;
  background: #ec6800;
  background-position: 0 0;
  background-size: 200%;
  transition: background 150ms ease-in-out, color 150ms ease-in-out;
}

<nav class="navbar navbar-custom">
  <div class="container">

    <ul class="nav navbar-nav navbar-right">
      <a href="signup.php"><button class="btn second">SIGN UP</button></a>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <a href="signup.php"><button class="btn sixth">LOG IN</button></a>
    </ul>

  </div>
</nav>

尝试在CSS代码中添加它。

.nav a{
  text-decoration: none !important;
}

Answer 2

尝试box-shadow：none;有些浏览器会为下划线正确添加

类似的东西：

a:hover {
    box-shadow: none;
    text-decoration: none;
}