链接按钮颜色HTML/CSS

-2

我有一个很大的问题，我创建了一个导致iTunes页面的按钮。链接按钮颜色HTML/CSS

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

我按照自己的方式工作，现在我遇到了一个不加下划线的文本，并且在按照我想要的方式徘徊时改变颜色。唯一的问题是边框不会与文字同时改变颜色。

示例：我可以悬停（并因此更改颜色）我的边框而不接触我的文本，显然这不是我想要的。

段：

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

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

所以基本上，我想有一个按钮，链接到一个网页，黑色背景，白色的文字和边框，具有文字和边框颜色在徘徊时改为＃E80C7A，文字上没有下划线。

来源

2016-05-06 illiaskh

你缺少右括号为您的风格:) –

[特殊性 - CSS（https://developer.mozilla.org/en/docs/Web/CSS/Specificity） – melancia

我知道，但我有他们在我的代码不用担心，我只是错过了他们的复制粘贴：o） – illiaskh

给你：）

从.btniTunes中删除填充并将其添加到.btniTunes a并将display: block;添加到它。

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

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

来源

2016-05-06 14:13:05

非常感谢！唯一的一点是，当我悬停在布顿的文字不会改变颜色？ – illiaskh

编辑:)现在它改变颜色:) –

非常感谢，非常感谢帮助！ :) – illiaskh

只是关闭括号中的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>覆盖按钮，设置它的“显示器”，以块：

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

来源

2016-05-06 14:06:24

当然你是对的，但这并不解决OP的问题。我的理解是： - 因为你使用的是锚，只有点击文本将带您到iTunes事件 - 因为你申请上的按钮悬停风格的变化，在按钮区域的任何地方徘徊（即不一定在文字上）会触发颜色变化。答案是要么使用JavaScript来绑定一个动作来点击你的按钮，要么让你的锚点显示：块和适合你的按钮的整个区域。 – zoubida13

链接按钮颜色HTML/CSS

回答

相关问题