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;
}
Related
I have a site in Wordpress where I am inserting a block with html.
This is the inserted html code:
<div class=“options-bar”>
<a href="https://total-speed-customs.myshopify.com/?" class=“options-bar-btn”>FUEL INJECTORS</a>
<a href="https://total-speed-customs.myshopify.com/collections/ignition" class=“options-bar-btn”>IGNITIONS</a>
<a href="https://total-speed-customs.myshopify.com/?" class=“options-bar-btn”>BOLTS</a>
<a href="https://total-speed-customs.myshopify.com/collections/e85-fuel" class=“options-bar-btn”>ELECTRONICS</a>
<a href="https://total-speed-customs.myshopify.com/collections/trailer-parts" class=“options-bar-btn”>WINCHES</a>
HITCHES
</div>
This is in the theme.css stylesheet at the very bottom:
.options-bar {
text-align: center;
}
.options-bar-btn, a { display: inline-block;
color: white !important;
text-decoration: none;
background: black !important;
padding: 10px 20px;
margin: 0px 5px;
border-radius: 6px;
text-align: center;
font-size: 22px;
}
#media screen and (max-width: 500px) {
.options-bar-btn, a { display: inline-block;
color: white !important;
text-decoration: none;
background: black !important;
padding: 3px 3px;
margin: 0px 1px;
border-radius: 3px;
text-align: center;
font-size: 10px;
}
}
It works for the inserted block html, but it also changes the styling of links sitewide. I've enclosed a link to the site in progress to show the row of buttons working correctly, but the top nav has the same styling, which needs to just be transparent for the logo and the main nav.
What I'm missing?
https://total-speed-customs.myshopify.com/
Your expression .options-bar-btn, a {...} means the following: set the following styles to all elements that have class options-bar-btn and to all tags a as well.
The comma in your code is a separator between two rules.
When you need to set a rule for an element that is a child of an element with class options-bar:
.options-bar a {
color: white !important;
}
This will select all a tags inside the elements with class options-bar.
If you want to change a style of all the links with class options-bar-btn:
a[class*="options-bar-btn"] {
color: white !important;
}
This will select all tags a then filter elements that has options-bar-btn class set.
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;
}
I'm trying to list form labels and button horizontally.
Here is my CSS code:
.viewLayout ol{
width: 1px;
float:left;
}
.viewLayout ol > li{
direction:ltr;
display: inline;
}
.viewLayout input[type=button] {
display:block;
width: 100px;
color:#FFF;
background-color: #808285;
border: 0 none;
border-radius: 3px;
font-size: 1.1em;
font-weight: bold;
height:22px;
cursor: pointer;
font-size: 13px;
}
Result of my code:
How to style the edit buttons to be inline with the office area ?
meaning
Remove width: 1px; property from ol description. And, obviously, display:block from input description.
UPD: interesting, but my browser doesn't render your code as your picture. Precisely, display:inline in li description breaks the markup. It should be removed.
First off here's what I'm trying to accomplish: http://i.imgur.com/EfKt16k.png
But I'd like to be able to vertically center the icon regardless if the text is one line or two. I've tried using an tag as well as using a psuedo :after element. And I've just not even gotten close. I'd like the entire area to be clickable. Any suggestions?
Here's an example: http://jsfiddle.net/a4x8p/
body { background: #e8e8e8; }
a { background: #68cdf0;
border: 1px solid #fff;
display: block;
color: #fff;
width: 200px;
text-decoration: none;
padding: 5px;
}
a i { float: right; vertical-align: middle; }
You can override the class .fa using specificity and avoid using !important.
Set display:table-cell; vertical-align: middle; on the the icon font element using high level of specificity for the selector in order to override the CSS properties inherited by the font-icon .fa class.
a i.fa.fa-caret-right { display:table-cell; vertical-align: middle; }
And then add display:table; to the a link.
a { background: #68cdf0;
border: 1px solid #fff;
display: block;
color: #fff;
width: 200px;
text-decoration: none;
padding: 5px;
display:table;
}
DEMO http://jsfiddle.net/a4x8p/4/
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... :)