CODEWITHSUNDEEP
csstwitter-bootstrap
BerndBrot
BerndBrot

Reputation: 1493

twitter-bootstrap: how to get rid of underlined button text when hovering over a btn-group within an <a>-tag?

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).

Upvotes: 101

Views: 221767

Answers (14)

baptme
baptme

Reputation: 10092

{ 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
}

Upvotes: 105

einbulinda
einbulinda

Reputation: 77

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>

Upvotes: 5

willingdev
willingdev

Reputation: 9626

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>

enter image description here

Upvotes: 0

Mahboob Ahmed Chishti
Mahboob Ahmed Chishti

Reputation: 13

just use bootstrap class "btn" in the link it will remove underline on hover

Upvotes: 0

Mick
Mick

Reputation: 31949

Bootstrap 4+

This is now easy to do in Bootstrap 4+

<a href="#" class="text-decoration-none">
    <!-- That is all -->
</a>

Upvotes: 157

Mam&#233;
Mam&#233;

Reputation: 69

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>

Upvotes: 1

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85575

Why not just apply nav-link class?

<a href="#" class="nav-link">

Upvotes: 13

namnh
namnh

Reputation: 533

.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.

Upvotes: 0

ARTniyet
ARTniyet

Reputation: 306

a:hover, /* OPTIONAL*/
a:visited,
a:focus
{text-decoration: none !important;}

Upvotes: 1

Rehno Lindeque
Rehno Lindeque

Reputation: 4435

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 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!

Upvotes: 18

Luke Flournoy
Luke Flournoy

Reputation: 3743

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;}

Upvotes: 7

TheLogicGuy
TheLogicGuy

Reputation: 690

a:hover{text-decoration: underline !important}
a{text-decoration: none !important}

Upvotes: 0

Alex
Alex

Reputation: 810

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.

Upvotes: 2

Jossef Harush Kadouri
Jossef Harush Kadouri

Reputation: 34217

a.btn {
  text-decoration: none;
}

Upvotes: 7

Related Questions