[Resolved] Change just one link color

[Maarten]

Hello,

Is there any way to override the general CSS-style and to change the text color of just one link?
Using CSS, I added a button in a widget on a page of my website, but the text color always turns blue (this is the color of all the other links on the website), but I’d like just this link color to be white all the time.

Here’s the .css of my button:

.btn {
-webkit-border-radius: 28;
-moz-border-radius: 28;
border-radius: 28px;
color: #ffffff;
font-size: 20px;
background: #e86850;
padding: 10px 20px 10px 20px;
text-decoration: none;
}

.btn:hover {
-webkit-box-shadow: 2px 2px 9px #666666;
-moz-box-shadow: 2px 2px 9px #666666;
background: #e86850;
background-image: -webkit-linear-gradient(top, #e86850, #e62e0e);
background-image: -moz-linear-gradient(top, #e86850, #e62e0e);
background-image: -ms-linear-gradient(top, #e86850, #e62e0e);
background-image: -o-linear-gradient(top, #e86850, #e62e0e);
background-image: linear-gradient(to bottom, #e86850, #e62e0e);
box-shadow: 2px 2px 9px #666666;
color: #ffffff;
text-decoration: none;
}

Many thanks in advance!

[Dee]

Maarten –

I’m just learning, but I think this is just basic CSS stuff. You have to style the link using the a designation. The order of link styles matters. They have to be in this order below. Here’s an example from my css.

/*product links in Google blue*/
.myproduct {
color: #0266C8;
text-decoration:underline !important;
}

a.myproductlink{ 
color: #0266C8;
text-decoration:underline !important;
}

a.myproductlink:visited{
color: #660099;
text-decoration:none !important;
} 

a.myproductlink:hover {
color: #0266C8;
text-decoration:underline bold !important;
} 

a.myproductlink:active {
/*color #0266C8;*/
}

[Tom]

All of the above CSS should work, but remember you need to add the class to the link itself, like so:

<a href="URL" class="btn">My link</a>

If the link has that class, your styling should work just fine.

Let me know 🙂

[Maarten]

But it doesn’t! If you want to take a look, you can find the button on this webpage! Many thanks Tom!
I added the CSS using Simple Custom CSS

[Tom]

The button seems to be working for me? Red background and white text?

Let me know.

[Maarten]

I’m sorry for all these silly questions Tom, but I checked on several systems and the text is only white while hovering over, I’d like the text to be white all the time and I don’t know what I’m doing wrong anymore 🙂

[Maarten]

Resolved it 🙂 didn’t know about adding the !important tag in CSS, never had to use this before! You can close this subject! Many thanks anyway!

[Tom]

Glad you figured it out 🙂

[Author]

Posts