Dani Springer Dani Springer - 5 months ago 9
CSS Question

css button color not white

I've generated a

css
button
, and the text should be white for
.button
and
.button:hover
, and light blue for
.button:active
.

But it shows purple for
.button
. Why?

Update: added the
<a>
tag the button applies to:

Note: I tried viewing it on incognito (which would remove the "visited" thing) and it appears black or, better said, like the
background
color.

Update 2: I updated the code with styling for
:visited
.

I'm still having issues:

On incognito, text displays like the
background
color.
on regular, text displays light blue the whole time, hovering not working, basically.

HTML:

<a href="example.com" style="text-decoration:none" class="button">text</a>


CSS:

<style>
.button {
text-decoration:none;
color:#0000ff;
background:#3838a5;
}
.button:hover {
color:#ffffff;
background:#3838a5;
}
.button:active {
color:#ff0000;
background:#3838a5;
}
.button:visited {
color:#ff00ff;
background:#3838a5;
}
</style>

Answer

If .button is an <A> tag as your CSS suggests you might want to provide styling for the "visited" pseudo class.

See: http://www.w3.org/wiki/CSS/Selectors/pseudo-classes/:visited


Additional Information

The cascading nature of CSS means that the style's order does matter.
Once a URL has been visited, the ":visited" styles will apply.
When you hover over the link, those styles will apply as well.
The priority in which they apply will depend on the order they are in your style sheet.

Note: If you want ":hover" to be dominant (even after visited happens, it should be defined below :visited.

Comments