Question

I’m quite confused by this one. I’ve build a “read more” button using mostly CSS (following this tutorial). Everything is working well, but the text is showing as white in Firefox but light blue in webkit (safari, chrome).

Here’s the CSS:

.showcase-readmore {
float:right;
color:#ffffff;
font:2em Futura, ‘Century Gothic’, AppleGothic, sans-serif;
padding:14px;
background:url(images/overlay.png) repeat-x center #0033cc;
border:1px solid #0033cc;
background-color:rgba(0,51,204,1);
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
border-bottom:1px solid #0033cc;
-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
}

.showcase-readmore:hover{background-color:rgba(0,51,204,0.6);}

.showcase-readmore:active{position:relative;top:2px;}

and the HTML:

<a class="showcase-readmore" href="services">Read More</a>

This is how I see it in FF:

and Chrome:

with FF being the desired behavior. My only guess is that the transparency is somehow causing the white font to be opaque and blending with the blue background?

I’m stumped!

Answer 1

For me the text is white in both Firefox and Chrome, so I’m pretty sure there is some issue with another part of the CSS: the pseudo selectors on the link element.

Because you’re styling a link here, the issue may be that a:visited overrules .showcase-readmore. To fix this, try to add the selectors to your button style:

.showcase-readmore:link, .showcase-readmore:visited {
   /* ... */
}