Blue Dash appearing next to Buttons without styling - html

Question

I am having an issue with my hero. For some reason this is appearing: https://gyazo.com/08edee1edcd0469d50da4883498a7f0a
This is my html (using bootstrap 5) and CSS. I've not styled it to do that, so I have no idea.
I've tried removing outline and border and it has not worked.
.hero-btn {
background-color: rgba(0, 0, 0, 0.6);
color: whitesmoke;
width: 18rem;
height: 5rem;
margin: 15px;
border-radius: 25px;
font-size: larger;
}
.hero-btn:hover {
color: white;
text-transform: uppercase;
font-weight: bold;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<div class="pt-3">
<h1 style="font-weight: 600;">West Yorkshire Roleplay</h1>
<br>
<h4>Welcome to West Yorkshire Roleplay!</h4>
</div>
<div class="mx-auto my-auto">
<a href="https://storm.westyorkshireroleplay.com/signup">
<button class="btn hero-btn">Apply Now</button>
</a>
<a href="https://storm.westyorkshireroleplay.com/communityinfo">
<button class="btn hero-btn">About Us</button>
</a>
</div>
<a href="#contact">
<img src="https://i.imgur.com/uvPeSwr.png" alt="" style="width:auto; height: 70px; position: relative; bottom: -45%;">
</a>

Answer 1

You have added <button> tag inside <a> tag which is wrong. The blue line is because of <a> shows hyper link style to text place inside it, in your case its assuming white space as text and thus showing blue dash.
As you have shared image for reference, it displays default css style for <button> tag.
Check if this css styling suits your need.
.hero-btn {
background-color: rgba(0, 0, 0, 0.6);
color: whitesmoke;
width: 18rem;
height: 5rem;
letter-spacing: normal;
word-spacing: normal;
line-height: 4;
text-align: center;
appearance: auto;
border-width: 2px;
border-style: outset;
border-color: buttonborder;
cursor: default;
box-sizing: border-box;
margin: 15px;
border-radius: 25px;
text-decoration: none;
font-size: larger;
}
.hero-btn:hover {
color: white;
text-transform: uppercase;
font-weight: bold;
}
<div class="pt-3">
<h1 style="font-weight: 600;">West Yorkshire Roleplay</h1>
<br>
<h4>Welcome to West Yorkshire Roleplay!</h4>
</div>
<div class="mx-auto my-auto">
<a class="btn hero-btn" href="https://storm.westyorkshireroleplay.com/signup">
Apply Now
</a>
<a class="btn hero-btn" href="https://storm.westyorkshireroleplay.com/communityinfo">
About Us
</a>
</div>
<a href="#contact">
<img src="https://i.imgur.com/uvPeSwr.png" alt="" style="width:auto; height: 70px; position: relative; bottom: -45%;">
</a>

Answer 2

What you're seeing is whitespace styled as a link due to your faulty HTML. Buttons have no business inside anchors. They each have a particular purpose (buttons for action, anchors for navigation) and should never be used together. If you want anchors styled as buttons, use the appropriate button classes. If you want buttons styled as text links, do the same.
Other advice...
Don't use inline styles. It's a pain for you and it's a pain for us and it's a pain for everyone who comes after. Use Bootstrap classes where you can (border radius, font size, font weight), and use custom classes with CSS everywhere else.
And don't use line breaks for spacing. That's not their purpose. Use margin or padding.
The my-auto class probably isn't doing what you think it's doing. Look into flexbox if you want to center things vertically. Of course you have to provide space in which to center.
Always strive for the simplest implementation possible. That means knowing what your library offers, and applying styling directly to elements when possible, as opposed to container elements that aren't necessary. Recognize that almost everything has relative position by default.
Finally, keep visual effects like hover changes subtle. This isn't Nintendo World. You don't want to nauseate your users with obnoxious behavior. A soft shadow or slight movement with animation to be easier on the eyes is often best.
body {
background: #ddd !important;
}
.hero-btn {
background-color: rgba(0, 0, 0, 0.6);
color: whitesmoke;
width: 18rem;
height: 5rem;
margin: 15px;
border-radius: 25px;
font-size: larger;
}
.hero-btn:hover {
color: white;
text-transform: uppercase;
font-weight: bold;
}
.fw-600 {
font-weight: 600;
}
.down-img {
width: auto;
height: 70px;
bottom: -45%;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<h1 class="pt-3 pb-2 fw-600">West Yorkshire Roleplay</h1>
<h4>Welcome to West Yorkshire Roleplay!</h4>
<div class="mx-auto my-auto">
Apply Now
About Us
</div>
<a href="#contact">
<img src="https://i.imgur.com/uvPeSwr.png" class="down-img" alt="">
</a>