Blue Dash appearing next to Buttons without styling-CodePudding

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/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div >
  <h1 style="font-weight: 600;">West Yorkshire Roleplay</h1>
  <br>
  <h4>Welcome to West Yorkshire Roleplay!</h4>
</div>

<div >
  <a href="https://storm.westyorkshireroleplay.com/signup">
    <button >Apply Now</button>
  </a>

  <a href="https://storm.westyorkshireroleplay.com/communityinfo">
    <button >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>

CodePudding user response：

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 >
  <h1 style="font-weight: 600;">West Yorkshire Roleplay</h1>
  <br>
  <h4>Welcome to West Yorkshire Roleplay!</h4>
</div>

<div >
  <a  href="https://storm.westyorkshireroleplay.com/signup">
    Apply Now
  </a>

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

CodePudding user response：

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/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<h1 >West Yorkshire Roleplay</h1>
<h4>Welcome to West Yorkshire Roleplay!</h4>

<div >
  <a href="https://storm.westyorkshireroleplay.com/signup" >Apply Now</a>

  <a href="https://storm.westyorkshireroleplay.com/communityinfo" >About Us</a>
</div>

<a href="#contact">
  <img src="https://i.imgur.com/uvPeSwr.png"  alt="">
</a>