CSSで作ったボタンにAタグ入れてhoverしたら、文字色が変わらなかった件。その対策。

CSSでボタンを作りました。ボタンにカーソルをのせたら。文字の色が白くなる予定でしたが・・・。

.contact__btn {
   cursor: pointer;
   background: #fff;
   color: #5b0c5e;
   border: 1px solid #cdcdcd;
   text-transform: uppercase;
   transition: all 0.25s ease-in-out;
   font-weight: bold;
   font-size: 18px;
   padding: 15px 40px;
   display: block;
   margin: 50px auto 0;
   width: 450px;
   height: 60px;
   border-radius: 3px;
   text-align:center;
}
.contact__btn:hover{
   color: #fff;
   background: #5b0c5e;
}
.contact__btn a{
   display:block;
}

ちなみに、htmlはこんな感じです。

<div class="contact__btn">
       <a href="#">Aタグのリンクだよ。</a>
</div>

結果、hover前

hover後

・・・文字色白くなるはずだったのですがなっていません。
そこでCSSを一部変更。

.contact__btn:hover{
   /*　color: #fff;　をとる*/
   background: #5b0c5e;
}

/*　↓追加　*/
.contact__btn:hover a{
   color: #fff;
}
.contact__btn a{
   display:block;
}

そして、再度hoverしてみる。

文字が白くなりました！！

なお、うっかりCSSを

.contact__btn:hover a{
   color: #fff;
   background: #5b0c5e;
}

のように、aのhoverに背景色の指定をしてしまうと、一瞬

文字の範囲だけが先に背景色がかわってからボタン全体の色が変化するので、ちょっとカッコ悪いです。