Question

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

Answer 1

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