Met behulp van de onderstaande opmaak wordt de tekst van de knop onderstreept wanneer de muisaanwijzer erop staat. Hoe kan ik van dat gedrag afkomen?

Is er een betere manier om links toe te voegen aan een btn-groep in bootstrap die dit gedrag vermijdt?

<a href="#">
    <div class="btn-group">
        <button class="btn">Text</button>
        <button class="btn">Text</button>
    </div>
</a>

Geteste CSS-regels:

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 }

Elke aanvullende !important werkt ook niet (suggereerd door baptme).

Antwoord 1, autoriteit 100%

Bootstrap 4+

Dit is nu eenvoudig te doenin Bootstrap 4+

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

Antwoord 2, autoriteit 99%

{ text-decoration: none !important}

BEWERK 1:

Voor jou werkt alleen a{text-decoration: none}

Je kunt een klasse gebruiken om het standaardgedrag van <a>-tags niet te verstoren.

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

Antwoord 3, autoriteit 18%

Knoppen met de klasse btnhebben geen onderstrepingen tenzij u iets verkeerd doet: in dit geval nesten <button>binnen <a>^†.

Iets dat ik denk dat je misschien probeert te doen, is een bootstrap-knop maken zonder enige versieringen (onderstreping, omtrek, knopranden, enz.). Met andere woorden, als uw anker geen hyperlinkis, is het semantisch een knop.

Bootstrap’s bestaande klasse btnlijkt de juiste manier te zijn om onderstreepte versieringen van ankerknoppen te verwijderen:

Gebruik de knopklassen op een <a>-, <button>– of <input>-element

EDIT:Hitesh wijst erop dat btnje een schaduw zal geven op :active. Bedankt! Ik heb mijn eerste voorbeeld aangepast om btn-linkte gebruiken en de text-decoration: nonevan het geaccepteerde antwoord opgenomen om dit probleem te voorkomen. Houd er rekening mee dat het nesten van een knop in een anker een misvormde html^†blijft, een punt dat door geen van de andere antwoorden wordt behandeld.

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

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

a.btn {
  text-decoration: none;
}

a:hover, a:focus { text-decoration: none;}

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

<a href="#first1" class=" nav-link">
   <button type="button" class="btn btn-warning btn-lg btn-block">
   Reserve Table
   </button>
 </a>

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

`<a href="#" class="***text-decoration-none***">
    <div class="btn-group">
        <button class="btn">Text</button>
        <button class="btn">Text</button>
    </div>
</a>`

a.btn { text-decoration: none !important; }

<a href="account/login" class="btn btn-outline-success mx-2">Login</a>