Customize Css button links color - css

I'm creating clickable CSS buttons for my website and want a green button with a white text. But my default link color (blue) is overriding everything and making the buttons with a green background but underlined blue link. What do I need to change?
.td-post-content a {
color: #2200CC;
text-decoration: underline;
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 24px;
margin: 4px 2px;
cursor: pointer;
}
.button a:link {
color: white;
}
<p style="text-align: center;"><a class="td-post-content button" href="https://www.expatkings.com/join">Join Now</a></p>
I except the td-post-content links to be blue and underlined while the button links should be green with white text.

I guess you can just add all css pseudo classes that work with "a" tag:
https://css-tricks.com/snippets/css/link-pseudo-classes-in-order/
https://www.w3schools.com/css/css_pseudo_classes.asp
.button,
.button:link,
.button:visited,
.button:hover,
.button:active{
color: white;
background: green;
padding: 5px 10px;
border-radius: 5px;
text-decoration: none;
}
<a class="button" >Name</a>

Try using !important. This will override the standard link color.
.button{
color: white !important;
}

:link works for elements with a href attribute that has not yet been visited.
If you wish to style all states of the link, use the following:
.button a {
color: white;
}

Related

Setting text-decoration: none but link is still underlined

I'm deisgning a simple button and I don't want the text link to have an underline. I set the text-decoration to "none" as in the css below, but it still is underlined. How can I get rid of that?
.button {
border-style: solid;
border-width: 2px;
border-color: #63D3FF;
background-color: #000E4D;
text-align:center;
display: inline-block;
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 15px;
color:white;
}
.button a {
text-decoration: none;
}
The HTML is:
Save Choice
Your CSS would work for links inside an element with the class button, like this:
<span class="button">Save Choice</span>
But in your HTML, the link itself has the class, so in that case, the CSS should be like this:
a.button {
text-decoration: none;
}

selctor:hover.class applied before hover

I want to apply a link selector hover effect which includes bottom border underline in an unordered list. Really, I know I can do a simple underline using a border-bottom: #FFFFFF solid 2px;, but I'd like to make a custom underline with box-shadow effect. So I have two issues.
my border is showing up all the time, not just when I hover.
When I tried to add a box shadow to my .underline class it goes around the whole list item and does not create a separate line. I guess we can get to this item later.
MY CSS CODE
li {
margin: auto 0px 20px auto;
font: 1em 'Bookman Old Style', Georgia, Garamond, ‘Times New Roman’, Times, serif;
color: #FFFFFF;
}
li a {
text-decoration: none;
color: rgba(255,255,255,0.5);
display: block;
}
li a:hover .underline {
cursor: pointer;
text-decoration: none;
color: rgba(255,255,255,1);
}
.underline {
border-bottom: #FFFFFF solid 2px;
}
MY HTML CODE
<ul>
<li><a class="underline" href="http://www.sitepoint.com/">SitePoint.com</a></li>
<li>Revealing CSS3 Menu</li>
</ul>
I would really like to be pointed to a comprehensive article about how to build rich HTML elements via CSS specfically using :before and :after and being able to use multiple classes on one selector in CSS properly.
Here is a JSFiddle of what I have (broken) http://jsfiddle.net/jellis3d/a8svpwr4/2/. Also here is a picture of what I'm after. I really exaggerated the underline in order to show what I'm looking for. The line does not have to have rounded edges either.
You could do it by apply border-bottom to .underline:hover and box-shadow and display: inline-block; to li a tag.
JSFiddle - DEMO
HTML:
<ul>
<li><a class="underline" href="http://www.sitepoint.com/">SitePoint.com</a>
</li>
<li>Revealing CSS3 Menu
</li>
</ul>
CSS:
body {
background: gray; /* only for demo */
}
li {
margin: auto 0px 20px auto;
font: 1em'Bookman Old Style', Georgia, Garamond, ‘Times New Roman’, Times, serif;
color: #FFFFFF;
}
li a {
text-decoration: none;
color: rgba(255, 255, 255, 0.5);
display: inline-block;
box-shadow: 0px 5px 5px #000;
}
li a:hover .underline {
cursor: pointer;
text-decoration: none;
color: rgba(255, 255, 255, 1);
}
.underline:hover {
border-bottom: #FFFFFF solid 2px;
}
i have made a basic demo on js fiddle showing what i think your after
jsfiddle link
it uses the below css which im sure you can then see what i did and make it into what your after.
li a{
color:blue;
text-decoration:none;
}
li a:hover{
color:red;
border-bottom: black solid 1px;
box-shadow: 10px 10px 5px #888888;
}
You want to add a box-shadow effect on hovering, right? You don't need to use an extra element like .underline then. Just add it to li a:hover
li a:hover {
cursor: pointer;
text-decoration: none;
color: rgba(255,255,255,1);
box-shadow: 0 1px 0 0 rgba(0,0,0,1);
}
You can read more about pseudo-elements like :before and :after on W3C: http://www.w3schools.com/css/css_pseudo_elements.asp
I made a small demo with your code using :before on hover: http://jsfiddle.net/m9czpzs5/

Changing text color of active menu item with CSS

I need your help with changing the text color of the active menu item on my website, using CSS.
(It's a Joomla website and I'm modifying the standard Gantry framework template to our needs).
Here is the CSS for the active menu item...
.gf-menu.l1 > li.active {
background: none;
color: #19D57E;
border: none;
border-bottom: 3px solid #19D57E;
border-radius: 0px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
margin: 0 auto;
padding-top: 1px;
}
And here is the CSS for the passive menu items...
.gf-menu .item {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 21px;
color: #555555;
padding: 4px 8px;
text-align: left;
text-shadow: 0px 0px 0 transparent;
text-decoration: none;
display: block;
outline: 0;
cursor: pointer;
font-weight: bold;
}
What I want is for the color of the text in active menu item to be green (#19D57E).
The active menu item is already displaying a green line at the bottom, but the text color of the menu item remains black like in the passive menu items. As you can see, I have specified the text of the color, but for some reason it is not doing it.
What am I doing wrong?
If you want to have a look at the website, please go to http://www.barrylong.tv/index.php/home
Thanks a lot!
Hector
This is the CSS needed:
.gf-menu.l1 > li.active a {
color: #19D57E;
}
Note the a after .active
Hope this helps
add this in your style sheet .gf-menu > .active > a {
color: #19D57E;
}.
I think you have to change the color of the .item element in the .active li-element. At the moment you are trying to change the color of the li-element and not of the link.
.gf-menu.l1 > li.active .item {
/* ... */
color: #19D57E;
/* ... */
}
Find the CSS block: for item101 active last
Notice in your source for "home":
<li class="item101 active last">
<a class="item" href="/index.php/home">Home </a> </li>
You will see the text color property to change. The reason what you are doing isn't working is that you are changing the wrong CSS block properties.

Overriding the CSS applied by "a" tag

I have below code,
<div id="nav">
<a href="#" >Tab1</a>
<a href="#" >Tab2</a>
<a href="#" >Tab3</a>
<a href="#" >Tab4</a>
<a href="#" >Tab5</a>
<a href="#" >Tab6</a>
<a href="#" >Tab7</a>
Tab8
<a href="#" >Tab9</a>
</div>
#nav a {
float: left;
color: #004761;
font-size: 12px;
font-weight: bold;
text-decoration: none;
padding: 9px 5px 9px 13px;
background-colour: white;
}
.tab8Class {
float: left;
color: #004761;
font-size: 12px;
font-weight: bold;
text-decoration: none;
padding: 9px 5px 9px 13px;
background-color: lightgray;
}
I want to apply a different background-colour for Tab8. So, for Tab8 alone I have added an extra class in the a href tag.
However, even for Tab8, #nav a is overriding all the attributes for tab8Class.
How can I make tab8Class to get applied?
You need to make the second rules more specific (for more info take a look ,e.g., at MDN on Specificity), so it does not get overridden by the first one. Additionally you don't have to repeat all unchanged properties:
#nav a {
float: left;
color: #004761;
font-size: 12px;
font-weight: bold;
text-decoration: none;
padding: 9px 5px 9px 13px;
background-color: white;
}
#nav .tab8Class {
background-color: lightgray;
}
Example Fiddle
There was a typo in the first rule as well: It said background-colour instead of background-color.
Make your selector even more specific:
#nav .tab8Class
You also remove the u in colour to have correct css:
background-color: white;
^
Use
#nav .tab8Class {
instead of:
.tab8Class {
This will make your selector more specific.
You can read about CSS specificity here.
Change your code like below
#nav a.tab8Class {
float: left;
color: #004761;
font-size: 12px;
font-weight: bold;
text-decoration: none;
padding: 9px 5px 9px 13px;
background-color: lightgray;
}
Just change the bg color rule, no need to write all rules again.
#nav a.tab8Class{
background: #000 ; // change the color
}
specificity you need to read something about this.
You have 2 options:
1) remove the class and use:
#nav a:nth-child(8){
background-color: lightgray;
}
2) this is more backward compatible:
#nav .tab8Class{
background-color: lightgray;
}
If you want to add a special hover effect (as assted in comments)
#nav .tab8Class:hover{
//Do something
}
You can simply do it with jquery. Please add jquery library.
$(document).ready(function(){
$('#nav a:eq(7)').addClass('tab8Class');
});

Grey background color when clicked

I have these CSS definition for my buttons:
nav ul li a {
display: block;
margin-right: 0px;
font-size: 19px;
line-height: 40px;
text-align: center;
text-decoration: none;
color: white;
/* border:1px solid red; */
}
In Internet Explorer 10, it gets a grey background when clicked. Why?
Just add a:active { background: none; } to your stylesheet.
Internet Explorer 10 seems to display links (anchors: i.e. <a href>), which has the property display:block; with a grey background when clicked.
You can remove this easily by inserting background-color:none; into your code. So, you should have the following code:
nav ul li a {
display: block;
margin-right: 0px;
font-size: 19px;
line-height: 40px;
text-align: center;
text-decoration: none;
color: white;
/* border:1px solid red; */
background-color:none;
}
On the positive, the problem should be removed. Two negatives include that, you cannot set a background, or have an active state in Internet Explorer (i.e. a:active). Other browsers will continue to work perfectly normal/fine.
Still we could not understand what about the question is? Which background color is gray? You didn't provide your html too. I guess this bit of code would help you to change or remove the color of the links will change the behavior in each states...
a:link {color:red;}
a:visited {color:green;}
a:hover {color:blue;}
a:active {color:yellow;}
With this four colors you could check yourself and come to the conclusion... :)

Resources