Bootstrap: "-" Symbol appears when hovering on a button

Created on 1 Oct 2020  路  5Comments  路  Source: twbs/bootstrap

OS: Windows 10(latest)
Browser: Microsoft Edge
Browser Version: Edge 85
CodePen Link: https://codepen.io/michaelg_2k05/pen/yLOdzZO
Issue: When I hover on the buttons there is a line like this "-" after each button except the last one.

picture MichaelGrigoryan25

Most helpful comment

@MichaelGrigoryan25 IIRC It would be better markup to put the a tag inside the button or even better give the a tag the class "btn" and remove the button tag altogether.

<a class="link btn btn-success" href="/">Element</a>

picture stormriderstudios on 1 Oct 2020
😄1 👍1

All 5 comments

It's caused by the button being inside an tag and the newline after the button but before closing of the tag

The - you're seeing is actually the underline onhover affect of the a tag.

stormriderstudios picture stormriderstudios on 1 Oct 2020

having a button inside a link is invalid markup.

patrickhlauke picture patrickhlauke on 1 Oct 2020
❤1 👍1

Yeah @patrickhlauke and @stormriderstudios . You are right.

      <a style="text-decoration: none" class="link" href="/">
        <button type="button" class="btn btn-success">Element</button>
      </a>

This worked for me. Thank you!

MichaelGrigoryan25 picture MichaelGrigoryan25 on 1 Oct 2020

@MichaelGrigoryan25 IIRC It would be better markup to put the a tag inside the button or even better give the a tag the class "btn" and remove the button tag altogether.

<a class="link btn btn-success" href="/">Element</a>

stormriderstudios picture stormriderstudios on 1 Oct 2020
😄1 👍1

Oh yeah! Where my brain was lol馃槀
Updated!

MichaelGrigoryan25 picture MichaelGrigoryan25 on 1 Oct 2020
Was this page helpful?
0 / 5 - 0 ratings

Related issues
eddywashere picture eddywashere  路  3Comments
athimannil picture athimannil  路  3Comments
vinorodrigues picture vinorodrigues  路  3Comments
ziyi2 picture ziyi2  路  3Comments
matsava picture matsava  路  3Comments