twitter-bootstrap: how to get rid of underlined button text when hovering over a btn-group within an <a>-tag?
CssTwitter BootstrapCss Problem Overview
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).
Css Solutions
Solution 1 - Css
Bootstrap 4+
This is now easy to do in Bootstrap 4+
<a href="#" class="text-decoration-none">
<!-- That is all -->
</a>
Solution 2 - Css
{ 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
}
Solution 3 - Css
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 -->
<a href="#" class="btn btn-link" style="text-decoration: none">Text</a>
<a href="#" class="btn btn-link" style="text-decoration: none">Text</a>
</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 -->
<a href="#" class="btn btn-default">Text</a>
<a href="#" class="btn btn-default">Text</a>
</div>
In other words, it should not be necessary to introduce your own However, be aware of certain subtleties.nounderline
class and/or custom styling as the other answers suggest.
† 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!
Solution 4 - Css
Why not just apply nav-link
class?
<a href="#" class="nav-link">
Solution 5 - Css
a.btn {
text-decoration: none;
}
Solution 6 - Css
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;}
Solution 7 - Css
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.
Solution 8 - Css
a:hover, /* OPTIONAL*/
a:visited,
a:focus
{text-decoration: none !important;}
Solution 9 - Css
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>
Solution 10 - Css
a:hover{text-decoration: underline !important}
a{text-decoration: none !important}
Solution 11 - Css
.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.
Solution 12 - Css
Solution 13 - Css
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>`
Solution 14 - Css
Add this css code to your css file:
a.btn { text-decoration: none !important; }
Use the a tag:
<a href="account/login" class="btn btn-outline-success mx-2">Login</a>
Solution 15 - Css
Try putting anchor tag inside