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!