Question

我遇到了一个问题，我创建了一个导致iTunes页面的按钮。

当我做CSS时我没有问题，直到我注意到我没有将按钮链接到页面。所以，当我这样做时，我无法禁用我按钮内的文字下划线。

我一路走来，现在我被困在一个没有下划线的文字上，并在我想要的时候徘徊变色。唯一的问题是边框不会与文本同时改变颜色。

示例：我可以悬停（从而改变颜色）我的边框而不触及我的文字，显然这不是我想要的。

摘录：

＆＃13;

.navigation{
background-color:#C5C5C5;  
}

.btniTunes {
  margin-left: 150px;
  margin-top: 150px;
  font-family: 'Roboto', sans-serif;
  background-color: transparent;
  border: 1px solid #ffffff;
  display: inline-block;
  cursor: pointer;
  color: white;
  font-size: 18px;
  padding: 10px 18px;
  text-decoration: none;
}
.btniTunes:hover {
  background-color: black;
  color: #E80C7A;
  border: 1px solid #E80C7A;
  text-decoration: none;
}
.btniTunes a {
  text-decoration: none;
  color: white;
}

＆＃13;

<nav class="navigation">
  <ul class="bouttons">
    <div class="btnSite">
      TO THE SITE
    </div>
    <div class="btniTunes">
      <a href="https://itunes.apple.com/be/artist/pnl/id370571621"> TO THE ITUNES</a>
    </div>
  </ul>
</nav>

＆＃13;

所以基本上，我希望有一个链接到页面的按钮，黑色背景，白色文本和边框，文本和边框颜色在悬停时变为＃E80C7A，文本没有下划线。

Answer 1

只需关闭css中的括号：

.btniTunes {
    margin-left:150px;
    margin-top: 150px;
    font-family: 'Roboto', sans-serif;
    background-color:transparent;
    border:1px solid #ffffff;
    display:inline-block;
    cursor:pointer;
    color:white;
    font-size:18px;
    padding:10px 18px;
    text-decoration:none;
}

.btniTunes:hover {
    background-color:black;
    color:#E80C7A;
    border:1px solid #E80C7A;
    text-decoration:none;
}

.btniTunes a {
    text-decoration:none;
    color: white;
}

如果您希望<a>覆盖按钮，请设置其＆＃34;显示＆＃34;块：

.btniTunes a {
    text-decoration:none;
    color: white;
    display:block;
    width:100%;
    height:100%;
}

Answer 2

你在这里：）

从.btniTunes移除填充并将其添加到.btniTunes a并向其添加display: block;。

＆＃13;

.btniTunes {
  margin-left: 150px;
  margin-top: 150px;
  font-family: 'Roboto', sans-serif;
  background-color: red;
  border: 1px solid #ffffff;
  display: inline-block;
  cursor: pointer;
  color: white;
  font-size: 18px;
  text-decoration: none;
}
.btniTunes:hover {
  background-color: black;
  color: #E80C7A;
  border: 1px solid #E80C7A;
  text-decoration: none;
}
.btniTunes a {
  display: block;
  padding: 10px 18px;
  text-decoration: none;
  color: white;
}
.btniTunes:hover a {
  color: #E80C7A;
}

＆＃13;

<nav class="navigation">
  <ul class="bouttons">
    <div class="btnSite">
      TO THE SITE
    </div>
    <div class="btniTunes">
      <a href="https://itunes.apple.com/be/artist/pnl/id370571621"> TO THE ITUNES</a>
    </div>
  </ul>
</nav>

＆＃13;

链接按钮颜色HTML / CSS

2 个答案: