Как изменить цвет текста посещенной кнопки?

Question

Итак, у меня есть код как

<button id="create_btn" class="btn" type="button" title="List Available Games">List Games</button>

и я хочу, чтобы цвет всегда был белым, даже после посещения. Мой CSS выглядит так:

.btn {
    border-radius: 0px; 
    color: white;
    display: inline-block;
}
.btn:hover { 
    color: white; 
}
#create_btn {
    background-color: firebrick; 
    width: 120px;
    height: 42px;
}

но я не знаю, как сделать так, чтобы цвет оставался белым, когда я щелкаю по нему, хотя в настоящее время он ничего не делает (в приложении он собирается создавать или перечислять игры на приведенной ниже таблице без обновления, так что мне делать? Я старался .btn:visited { color: white;} но это не работает, также попытался добавить <a></a> вокруг него и меняя a:visited но текст по-прежнему черный при нажатии.

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

Answer 1

Кажется, что ваш CSS перезаписывается. Пожалуйста, используйте FireBug ( http://getfirebug.com/enable) и проверьте класс /id для переопределений

https://jsfiddle.net/z7h0kc79/ - вроде нормально.

<button id="create_btn" class="btn" type="button" title="List Available Games">List Games</button>


.btn {
border-radius: 0px; 
color: white;
display: inline-block;
}

.btn:hover { color: white; }
#create_btn {
background-color: firebrick; 
width: 120px;
height: 42px;
}

Answer 2

Вы написали свой CSS для стилизации кнопки, а также при наведении курсора на кнопку. То, что вам не хватает, это стиль CSS для посещаемых. Это можно добавить в вашу таблицу стилей CSS:

.btn: посетил { }

Поместите свой "цвет фона" (который закрасит всю кнопку). Помните, что "цвет" относится только к тексту.

Вы также можете изменить посещенную кнопку на изображение после ее посещения. Рисовать изображение в CSS довольно просто. В итоге вы получите.btn:visit {background-image: }