リンクボタンの色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%; 
}