鏈接按鈕顏色HTML/CSS

Question

我有一個很大的問題，我創建了一個導致iTunes頁面的按鈕。

當我做了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，文字上沒有下劃線。

Answer 1

給你： ）

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

Answer 2

只是關閉括號中的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%; 
}