Как изменить цвет кнопки, когда она активна?

Question

Это мой код:

<div class="shell-container"><br>
      <center><a href="{{instagram_url}}"style="margin:-3.5px; background-color: #e4405f" class="button btn btn-block btn-instagram"> <i style="margin: 0 5px 0 0;" class="fab fa-instagram"></i>    Sígueme en Instagram </a><br></center>
    </div>

И это мой класс "button"

.button{
    border-radius: 6px;
    width:275px;
    color: white
  }

Проблема в том, что всякий раз, когда вы наводите курсор на ссылку или когда я нажимаю на нее, шрифт автоматически становится черным, и я не хочу, чтобы это происходило. Я хотел бы только быть белым в качестве первого изображения. Заранее спасибо

Answer 1

Цвет по умолчанию для «посещенной» или нажатой ссылки - фиолетовый в большинстве браузеров. Похоже, у вас есть другое правило CSS, которое делает ваши посещенные и наведенные ссылки черными. Вы можете найти пример того, как изменить это ниже:

.button:visited,
.button:hover,
.button:a {
  color: white
}

Обратите внимание, что вы можете группировать подобные правила вместе, разделяя их запятой.

Answer 2

Попробуйте это:

.button:hoover, .button:focus {     
    color:white;    
}

Answer 3

Если другие правила css не обладают большей степенью специфичности, текст кнопки будет всегда белым:

.button: hover, .button: active, .button: focus {color: white}

Как правило, рекомендуется дифференцировать видимость различных состояний, поскольку это дает обратную связь с пользователем о происходящем.