In my sidebar, there are some <router-link>and I want their style is to be different when they are active. I am using router active-class for the <router-link> but the other elements inside the router-link are not taking some css properties. Here is my <router-link> looks like;
<router-link tag="li" to="/dashboard" class="nav-item has-treeview" active-class="active">
<a class="nav-link" id="dashboard_tab">
<i class="sidebar-icons">dashboard</i>
<p class="sidebar-links" active-class="active-p">Dashboard</p>
</a>
</router-link>
And here is my .active class;
.active {
background-color: #FF7400;
border-color: #FF7400;
border-radius: 4px;
color: white;
}
Now when a specific link is clicked and active, I have orange background and some border around that router-link. But my problem is, I also want the color of the icon and the p element is to be white, but they are not being effected by the color: white; property. What am I missing? active-class is only working for the router-link element so I cannot use it in the i or p. What should i do?
I have a multi step form that is using UI-router. I'm wondering how i can bold the active links and keep it bolded. right now the links only get bolded when i click on them and go back to its original css when i click out of it.
html:
<div class="text-center">
<a ui-sref-active="active" ui-sref=".info"><span>1</span> Personal Info</a>
<a ui-sref-active="active" ui-sref=".events"><span>2</span> Interests</a>
<a ui-sref-active="active" ui-sref=".submit"><span>3</span> Kewl Dawg</a>
</div>
css:
a:active {
font-weight: bold;
}
here is a link to the plunkr:
https://embed.plnkr.co/PSpH6qdlm9JltgU2DAbj/
Solved:
just removed a: from the css....
ui-sref-active adds a class, your css targets the ':active' pseudoclass. use a.active in your css.
https://plnkr.co/edit/FcHpaV5ITXYqXLs0FwZL?p=preview
white button
I was trying to make a vertical navbar with a background image. But as I clicked the button, they turned to white. What steps can I take to make them stay white? Like, I've tried primary-outline stuff I searched, but it doesn't work out.
Have you tried to define pseudo classes for your button, link?
/* unvisited link */
a:link {
background-color: #ffffff;
}
/* visited link */
a:visited {
background-color: #ffffff;
}
/* mouse over link */
a:hover {
background-color: #ffffff;
}
/* selected link */
a:active {
background-color: #ffffff;
}
I have solved this myself. It was because there was a fault in my markup. I added inside . But I still don't know why this is wrong. Here's the codepen:
<div class="paintallblack">
<div class="row">
<!--let's row this. Like, 1 md for vertical navbar, 5 md each for the rest -->
<div class="col-md-1 verticalnav">
<div class="nav nav-pills nav-stacked">
<a class="btn" href="#mypic">
A<br>b<br>o<br>u<br>t</a>
<a class="btn" href="#">
P<br>o<br>r<br>t<br>f<br>o<br>l<br>i<br>o</a>
<a class="btn" href="#"> C<br>o<br>n<br>t<br>a<br>c<br>t</a>
</div>
</div>
<div class="col-md-5 col-md-offset-1 leftcontent">
<!--LEFT PART CONTENTS FOR ABOUT, PORT, AND CONTACT-->
<img id="mypic" src="https://scontent-sit4-1.xx.fbcdn.net/v/t1.0-9/15940460_161286387692018_3963016562080030457_n.jpg?oh=6e79da88fff3df387121a5ac66a7de32&oe=59212A06" alt="mystupidface">
</div>
<div class="col-md-5 rightcontent">
<!--RIGHT PART CONTENTS FOR ABOUT, PORT, AND CONTACT-->
<p>Here I am, struggling to learn web development in order to build my own online magazine one day. Who am I? What do I do? In clear weather, I run. I can write stories, poetries, book reviews, compose musics, draw pictures. But nowadays my priorities
are: run for my health, learn to code, and try to read and write science-fiction as frequent as I can.</p>
</div>
</div>
http://codepen.io/Hertzsprung/pen/JEKxwN.
Bootstrap default style is
.btn-link, .btn-link:active, .btn-link:focus, .btn-link:hover {
border-color: transparent;
}
Override the style btn-link border-color:#fff; not transparent
Here is
.btn-link, .btn-link:active, .btn-link:focus, .btn-link:hover {
border-color: #fff;
}
I have an anchor link which has an image and two spans of text, a title and a tagline with different colors, and i want them to change differently when hovering the link.
<style>
span.title {color: #666;}
span.tagline {color: #aaa;}
</style>
<a class="button" href="http://www.link.com" target="_blank">
<div style="display:block">
<img src="images/button.png">
<span class="title">TITLE</span><br>
<span class="tagline">tagline</span>
</div>
</a>
I wonder if it's possible to use something like:
<style>
a.button:hover span.title {color: #000;}
a.button:hover span.tagline {color: #2ae;}
</style>
Yes thats possible. Psuedo class :hover doesn't have to be for the last element in the selector.
Live Demo: http://jsfiddle.net/H35rf/
For future reference its easier/quicker to try this out for yourself in jsFiddle before asking questions.
Using the markup below, the button text is underlined when hovered over. How can I get rid of that behavior?
Is there a better way to add links to a btn-group in bootstrap that avoids this behavior?
<a href="#">
<div class="btn-group">
<button class="btn">Text</button>
<button class="btn">Text</button>
</div>
</a>
Tested CSS lines:
a:hover .btn-group { text-decoration: none }
a .btn-group:hover { text-decoration: none }
a:hover .btn-group .btn { text-decoration: none }
a .btn-group .btn:hover { text-decoration: none }
Any additional !important does not work, either (suggested by baptme).
Bootstrap 4+
This is now easy to do in Bootstrap 4+
<a href="#" class="text-decoration-none">
<!-- That is all -->
</a>
{ text-decoration: none !important}
EDIT 1:
For you example only a{text-decoration: none} will works
You can use a class not to interfere with the default behaviour of <a> tags.
<a href="#" class="nounderline">
<div class="btn-group">
<button class="btn">Text</button>
<button class="btn">Text</button>
</div>
</a>
CSS:
.nounderline {
text-decoration: none !important
}
Buttons with the btn class do not have underlines unless you are doing something wrong: In this case nesting <button> inside of <a>†.
Something that I think you might be trying to do, is to create a bootstrap button without any decorations (underline, outline, button borders, etc). In other words, if your anchor is not a hyperlink, it is semantically a button.
Bootstrap's existing btn class appears to be the correct way to remove underline decorations from anchor buttons:
Use the button classes on an <a>, <button>, or <input> element
EDIT: Hitesh points out that btn will give you a shadow on :active. Thanks! I have modified my first example to use btn-link and incorporated the accepted answer's text-decoration: none to avoid this problem. Note that nesting a button inside of an anchor remains malformed html†, a point which isn't addressed by any of the other answers.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet"/>
<div>
<!-- use anchors for borderless buttons -->
Text
Text
</div>
Alternatively, for a regular button group using anchors:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet"/>
<div class="btn-group">
<!-- use anchors for borderless buttons -->
Text
Text
</div>
In other words, it should not be necessary to introduce your own nounderline class and/or custom styling as the other answers suggest. However, be aware of certain subtleties.
† According to the HTML5 spec, <a><button>..</button></a> is illegal:
Content model:
Transparent, but there must be no interactive content descendant.
...
Interactive content is content that is specifically intended for user interaction.
a, audio (if the controls attribute is present), button, embed, iframe, img (if the usemap attribute is present), input (if the type attribute is not in the hidden state), keygen, label, object (if the usemap attribute is present), select, textarea, video (if the controls attribute is present)
P.S. If, conversely, you wanted a button that has underline decorations, you might have used btn-link. However, that should be rare - this is almost always just an anchor instead of a button!
Why not just apply nav-link class?
<a href="#" class="nav-link">
a.btn {
text-decoration: none;
}
The problem is that you're targeting the button, but it's the A Tag that causes the text-decoration: underline. So if you target the A tag then it should work.
a:hover, a:focus { text-decoration: none;}
If you are using Less or Sass with your project, you can define the link-hover-decoration variable (which is underline by default) and you're all set.
a:hover, /* OPTIONAL*/
a:visited,
a:focus
{text-decoration: none !important;}
Easy way to remove the underline from the anchor tag if you use bootstrap.
for my case, I used to like this;
<a href="#first1" class=" nav-link">
<button type="button" class="btn btn-warning btn-lg btn-block">
Reserve Table
</button>
</a>
add the Bootstrap class text-decoration-none to your anchor tags
<a href="#" class="text-decoration-none">
<div class="btn-group">
<button class="btn">Text</button>
<button class="btn">Text</button>
</div>
</a>
a:hover{text-decoration: underline !important}
a{text-decoration: none !important}
.btn is the best way, in modern website, it's not good while using anchor element without href so make the anchor tag to button is better.
just use bootstrap class "btn" in the link it will remove underline on hover
Add this css code to your css file:
a.btn { text-decoration: none !important; }
Use the a tag:
Login