Here is my CSS
.button-1 {
background-color: #f7f1e3;
border: none;
color: #393939;
padding: 12px 12px;
font-size: 14px;
cursor: pointer;
font-family:Montserrat;
font-weight:400;
font-style:normal;
}
.button-1:hover {
background-color: #aaa69d;
color: #393939;
}
And here is the HTML
<button class="button-1">
Click Me
</button>
So, there's nothing at all complicated here but I have got stuck on the most efficient way to add a basic HREF tag for a link.
If I add a simple link in the text area of the button then I get the generic styles.
Now, of course, I can create a CSS A Class for the button but I have several of these and it is just going to create a lot more code.
My question is: what's the most efficient way? Can I not just add the Link Class to the button-1 CSS directly?
Thanks!
To be specific, you should make a new selector to <a> element inside the button:
.button-1 a{}
also, if you want to remove all "generic styles" from your <a> tags you can create generic selector for links.
a{
color:inherit,
text-decoration: none
}
or even a * selector for all elements
*{
color:inherit,
text-decoration: none
}
PD: If you add padding style to button element and inside of this a <a> element, the padding area won't be clickable for link, I recommend you to add padding to <a> element.
Related
So, I need to remove a visited link coloring from my navigation bar, as it will look ugly.
I have tried to use text-decoration: none; and color: white; but that does not seem to help it.
CSS for navigation
Actual code
I removed the actual links from the code, in the real version there is link but for this question links are replaced with #
In addition to Bariock's answer, this will help reset your <a> links in all circumstances to your specified css.
a:visited, a:hover, a:active, a:focus {
color: yourColor !important;
text-decoration: none !important;
outline: none !important;
}
The !important signifies that it has a higher precedence than that of other rules declaring the same values for the same selectors. Note: you can still style them separately such like you would with :hover.
a:visited{
color: your-color;
}
I edited the <a> tag to go around the <button> so the text is back to white now and the button actually works. It is no longer just "click text to visit link" the whole button works.
<button class="dropbtn">Community</button>
Try adding a !important to the end of the css styles like so:
a {
color: white !important;
}
Hope this helps!
I recommend you first set the style of the link tag, for example:
.dropdown a{ color:#fff }
now your text links inside the container with the class .dropdown will be as white color. Then you don't need to set a visited link color, unless you want to set it.
If you want to get rid the underline in the link, your style will be like this:
.dropdown a{ color:#fff; text-decoration: none; }
I've just started using FontAwesome, so far so good. One question though, when I use it with an anchor tag and it has text-decoration:none, and on hover text-decoration:underline. When I hover the link, the icon gets the underline effect, too…how do I get only the link to be underlined, not the icon?
I tried to placing it outside the anchor tag, but it doesn't get the color I assigned to the link
Sample code:
<style>
a{color:red;text-decoration:none;}
a:hover{text-decoration:underline;}
</style>
<span class="fa fa-camera-retro"> </span>This's a test
Thank you
I popped your exact code into JSFiddle and noticed that the camera icon itself wasn't being underlined completely, but the space between the icon and the text was.
So, if that's what you're experiencing, you can simply add a bit of padding after the icon, that way there's no whitespace to underline.
a {
color: red;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.fa {
padding-right: 5px;
}
a:hover .fa {
color: blue;
}
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<span class="fa fa-camera-retro"></span>This is a test
The last item in the CSS was merely to show that no underline effect was happening on hover by changing the icon's color to show formatting wasn't being applied from other items. Notice there's no space after the span tag, instead the space is created by the 5px padding applied to anything with the .fa class.
I tested this in both a very recent version of Firefox, and IE9 because those are what's on my work machine.
I had a similar issue, and found that the fa class defines an inline-block display mode. If I forced the display to inline inside a link, then everything was fine.
a > .fa {
display: inline;
}
Put your <span> outside of the <a> so its not affected by your hover...
<span class="fa fa-camera-retro"></span>This is a test
You can add a style for the a:hover span.fa selector:
<style>
a {
color: red;
text-decoration: none;
}
a:hover span.fa {
text-decoration: none;
}
</style>
<span class="fa fa-camera-retro"></span> This is a test
Not sure what I did last night but now I get up this morning and chrome seems to be overriding my anchor and input styles. I wish there was a snippet of code I could post here but I have no idea what code could possibly be causing it. i don't want to put !mportant all over the place to fix it so I am hoping someone can look at the test site and figure out what chrome doesn't like.
The headerWidgets at the top of the page (email, phone, and search) should not have decoration and should change color on hover. I can't even place the cursor in the search input anymore. And the nav menu shouldn't have decoration, but the hover works. Go figure. chrome dev tools shows me this:
a:-webkit-any-link { user agent stylesheet
color: -webkit-link;
text-decoration: underline;
cursor: auto;
}
and a bunch of user style sheet entries for input
a:-webkit-any-link {
color: -webkit-link;
text-decoration: underline;
cursor: auto;
}
is the default styles of webkit for the a tag.
Add a css selector #email a,#phone a and put the styles you want inside. Like this:
#email a,#phone a{
text-decoration:none;
}
and for the hover:
#email a:hover,#phone a:hover{
color:red;
}
A better selector to target all anchor tags inside #headerWidgets
#headerWidgets a {
color: #F00;
}
#headerWidgets a:hvoer {
color: #CCC;
}
And the reason why you cant click on your search box anymore is that div#headerMenuWrapper is blocking the way. On dev tools hover on this element <div id="headerMenuWrapper" class="clearfix"> you will see it covering #headerWidgets
this is really confusing, i don't want the browser to change the color of links, so the links color will stay same as specified in <font> . i know that i can specify a color with the property A:link , but that's not what i want.
Thanks
If you don't want any coloration just do something like this:
a, a:hover, a:visited, a:active {
color: inherit;
text-decoration: none;
}
If anyone cares this is what I did with buttons that I made from the links. Probably have to watch out for the inheritance but it worked perfect in my case. Good luck!
HTML:
<a class="button blue" href="/">Place Your Order Today</a>
CSS:
a.button:visited
{
color:inherit;
}
.button
{
padding: 6px 8px;
font-size: 14px;
font-weight: bold;
text-decoration: none;
margin-right: 10px;
border-radius: 6px;
}
.blue
{
border: 1px solid #2d748c;
background-color: #40b5dc;
}
Specify the same color for a:visited and maybe also a:hover and a:active or simply put the color inline like this:
link text
<font> is deprecated anyway.
I'm pretty sure there's no way to do what you're describing. But if you want the link color to match the body text color, I'd recommend this...
The body text color came from somewhere. Probably a CSS definition. Inspect some text in Firebug to see exactly where the applied color was defined. For example, maybe it points you to a rule like this:
body { color:#666; }
Just add in your A tag right there, so it would be like this. I know it's redundant but I really don't think CSS has a way to say "inherit from one level higher in the cascade than you usually would."
body, a { color:#666; }
So it looks like if I add style such as background color to LinkButton in my .cs code, it overrides any css I have that applies to it.
is there any way to add style rather than replace it in my code behind? Thanks!
I am using link button as a menu, so active linkButton should have different background color.
so my solution was when the user clicks on the link button in my event handler I do something like:
lnkView.BackColor = System.Drawing.Color.FromName("#369");
But then my hover style which I have in my css will no longer work:
.navlist a:hover
{
color: #fff;
background-color: #369;
text-decoration: none;
}
in my aspx:
<ul class="navlist">
<li><asp:LinkButton ID="lnkView" runat="server">view</asp:LinkButton></li>
<li><asp:LinkButton ID="lnkCreateNew" runat="server">create new</asp:LinkButton></li>
</ul>
EDIT: Your question is unclear, but you appear to be mis-understanding CSS. Adding background-color to the style property will not cause it to completely ignore any CSS rules. Rather, it will override any CSS rules for the background-color property, but will not affect any other rules.
If you don't want to override the background-color property from the CSS rule, add the !important flag to the CSS rule in :hover, like this:
background-color: #369 !important;
Also, change the color so that the change wil be noticable.
Alternatively, you could add a new CSS rule for .navlist a:link .Active with your background color, then add the Active class in code. (lnkView.CssClass += "Active")
By the way, instead of calling Color.FromName, you should write Color.FromArgb(0x33, 0x66, 0x99).
Any inline styles will always override any inherited styles from the head of a document or an external css file. The only other option would be to add a javascript function that overrides the style of the object after DOM ready or Window ready event.
Not sure of your use here, as your question isn't real clear. However this could be an option as well.
Have two css styles:
.navlistafteranaction a:link
{
color: #fff;
background-color: #123;
text-decoration: none;
}
.navlist a:link
{
color: #fff;
background-color: #123;
text-decoration: none;
}
Then in your code behind just switch your CSSClass:
lnkbtn.CssClass = "navlistafteranaction";
This would change the class to have whatever style you wanted after the fact.
If I understand what you want correctly, you want different styles applied based on whether the linkbutton is being hovered over? So, have the style you have but also have:
.navlist a:link
{
color: #fff;
background-color: #123;
text-decoration: none;
}
if you want a third color, for after a link is visited, define that with a:visited. Is that what you're after?