Конфликт стилей бутстрап-кнопок и ссылок

Question

Я использовал тег <%= link_to "Sign up!", signup_path, class: "btn btn-lg btn-primary" %> в моем ERB-шаблоне.Это ссылка, но с дизайном кнопок.

Я использую загрузчик, но меняю цвета кнопок по умолчанию.

Проблема в том, что я установил цвета ссылок в моем файле scss.А цвет ссылок = цвет фона кнопок.

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

Но проблема только с этой кнопкой .

Эта кнопка, когда я использую стили кнопок и ссылок:

(при наведении мыши и нажатии - появляется текст)

Эта кнопка,когда я удалил стили ссылок:

Я хочу сделать эту кнопку фиолетовым с белым текстом и сохранить другие ссылки фиолетовым.

Что я должен сделать, чтобы решить эту проблему?

Часть моего файла находится здесь:

/ app / assets / stylesheets / custom.css.scss

/* constants */
$bgDefault:   #9b59b6;
$bgHighlight: #8e44ad;
$bgHover:     #7f4496;
$bgActive:    #633575;
$bgDisabled:  #b07ec4;
$colHover:    #333;

/* buttons */
.btn-primary {
  background-color: $bgDefault;
  border-color: $bgHighlight;
    &:hover {
      background-color: $bgHover;
      border-color: $bgHighlight;
    }
    &:active, &:focus, &:active:hover, &:active:focus {
      background-color: $bgActive;
      border-color: $bgHighlight;
    }
}

.btn-primary.disabled {
  background-color: $bgDisabled;
  border-color: $bgHighlight;
}

.btn-primary.disabled:hover, .btn-primary.disabled:focus,
.btn-primary.disabled.focus, .btn-primary[disabled]:hover,
.btn-primary[disabled]:focus, .btn-primary[disabled].focus,
fieldset[disabled] .btn-primary:hover, fieldset[disabled]
.btn-primary:focus, fieldset[disabled] .btn-primary.focus {
  background-color: $bgDisabled;
  border-color: $bgHighlight;
}

/* links */
a {
  color: $bgDefault;
  &:visited {
    color: $bgDefault;
     }
  &:active {
    color: $bgActive;
  }
  &:hover {
    color: $colHover;
  }
}

Answer 1

Я нашел решение.Эта ошибка, потому что эта ссылка была посещена .

Я добавил этот код:

.btn:visited { 
  color: #fff
}

Теперь это работает.

Возможно, это будет полезно длякто-то.

Answer 2

Вам нужно будет явно установить цвет текста в ваших кнопках.Попробуйте это:

 .btn-primary {
   color: white;
 }