aの文字色変わらない

Question

こんばんは。

ボックス内の文字が元の青から変わらないです＞＜
白に指定しておりますが、なにを試しても効きません。
どなたかご教授いただければ幸いです。

HTML

<section class="btns">
<div class="btn_tel">
<a href="#"><i class="fas fa-phone-alt"></i>お電話でのお問い合わせはこちら<BR>
    00-0000-0000</a>
</div>

<div class="btn_mail">
<a href="#"><i class="fas fa-envelope"></i>メールでのお問い合わせはこちら</a>
</div>
</section>

CSS

.btn_tel {
    display: inline-block;
    text-align: center;
    line-height: 1.5;
    width: 100%;
    padding: 0.5em 1em;
    text-decoration: none;
    background: #83a4eb;
    color: FFF;
    border-bottom: solid 4px #627295;
    border-radius: 3px;
  }
  .btn_tel:active {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
    border-bottom: none;
}


.btn_mail {
  display: inline-block;
  text-align: center;
  margin: 7px 0 40px 0;
  width: 100%;
  height: 68px;
  line-height: 52px;
  padding: 0.5em 1em;
  text-decoration: none;
  background: #83a4eb;
  color: #FFF;
  border-bottom: solid 4px #627295;
  border-radius: 3px;
}
.btn_mail:active {
  -webkit-transform: translateY(4px);
  transform: translateY(4px);
  border-bottom: none;
}

Answer 1

a要素のブラウザ標準のスタイルに上書きされています。
以下のようにより強い優先度の記述をして下さい。

.btn_tel a,
.btn_mail a {
  color: #FFF;
}

(a要素自体にクラス名を当ててスタイルを適用するのも一つの方法です)

Comments

[AyakaFujimoto]

お返事おくれました＞＜
試してみるとできました！
本当にありがとうございました。