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
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;
}
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/
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.
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');
});
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... :)