How to changed color of visited button text?

Question

So I have code like

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

and I want to have the color always be white, even after visited. My CSS looks like:

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

but I don't know how to make the color stay white when I click it, even though it currently does nothing (in the application, it's going to create or list the games on a table below without refreshing, so what should I do? I tried .btn:visited { color: white;} but that doesn't work, also tried adding <a></a> around it and changing the a:visited but the text still is black when clicked.

I'm not even sure if it's the 'visited' concept, because when I click the button, I haven't added the JS functionality for it to do anything yet, so it just sits there loading until I click somewhere else. While it's 'loading' after clicked, it's black, and I'd like it to stay white.

Answer 1

It seems that your CSS gets overwritten. Please use FireBug (http://getfirebug.com/enable) and check the class/id for overrides

https://jsfiddle.net/z7h0kc79/ - seems fine.

<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

You've got your CSS written to style the button as well as when you hover on the button. What you're missing is the CSS styling for visited. This can be added to your CSS stylesheet:

.btn:visited { }

Put your "background-color" (which will color the entire button). Remember that "color" only ever applies to text.

You can also changed the visited button to an image after its been visited. Drawing the image in CSS is fairly simple. You end up with .btn:visited {background-image: }