how to clear black dash in html button?

Question

I don't know how to describe my problem but look at my output you'll get an idea. I googled about my problem but i couldn't found the solution. Output Image

.btn1 {
  font-family: 'Times New Roman', Times, serif;
  margin-right: 0px;
  width: 100px;
  height: 30px;
  font-size: 17px;
  font-weight: 200;
  background-color: #f7e7e7;
  color: rgb(49, 126, 126);
  border-radius: 5px;
  border: 1px solid rgb(186, 230, 173);
  box-shadow: 3px 3px rgb(98, 151, 98);
}

<div>
  <a href="#">
    <button class="btn1">Home</button>
  </a>
  <a href="product.html">
    <button class="btn2">Products</button>
  </a>
  <a href="#">
    <button class="btn3">Buy Now</button>
  </a>
  <a href="findus.html">
    <button class="btn4">Find us</button>
  </a>
</div>

Every button have same code in CSS. Can you please tell, what am i doing wrong? Thank you.

You have wrapped the buttons using anchor tag. Anchor tag add underline to the text by default. In your case Anchor tag is treating buttons as a text and adding underline. So if you want to remove underline, you have to add property TEXT-DECORATION:NONE;. — Ajay Malhotra, Jul 19 '20 at 06:25
Links cannot contain buttons and vice versa6. It's invalid HTML — Paulie_D, Jul 19 '20 at 08:23

ksav · Accepted Answer · 2020-07-19T06:30:14.703

You have unnecessarily wrapped each of your <button>s in an <a> tag and this is the browser's default underline style of the <a> tag that you can see.

Note: Some of the other answers suggest simply hiding the underline, but wrapping a <button> in an <a> is considered to be an anti-pattern that should be avoided.

Links

.btn1 {
  font-family: 'Times New Roman', Times, serif;
  margin-right: 0px;
  width: 100px;
  height: 30px;
  font-size: 17px;
  font-weight: 200;
  background-color: #f7e7e7;
  color: rgb(49, 126, 126);
  border-radius: 5px;
  border: 1px solid rgb(186, 230, 173);
  box-shadow: 3px 3px rgb(98, 151, 98);
  text-decoration: none;
}

<div>
  <a class="btn1" href="#">Home</a>
  <a class="btn1" href="product.html">Products</a>
  <a class="btn1" href="#">Buy Now</a>
  <a class="btn1" href="findus.html">Find us</a>
</div>

Buttons

.btn1 {
  font-family: 'Times New Roman', Times, serif;
  margin-right: 0px;
  width: 100px;
  height: 30px;
  font-size: 17px;
  font-weight: 200;
  background-color: #f7e7e7;
  color: rgb(49, 126, 126);
  border-radius: 5px;
  border: 1px solid rgb(186, 230, 173);
  box-shadow: 3px 3px rgb(98, 151, 98);
}

<div>
  <button class="btn1">Home</button>
  <button class="btn2">Products</button>
  <button class="btn3">Buy Now</button>
  <button class="btn4">Find us</button>
</div>

You can read about links vs buttons, and why you might choose one over the other here.

Robert Cooper · Answer 2 · 2020-07-19T14:14:04.313

4

The dashes you are seeing are actually the default underline that accompanies anchor elements. All you need to add is:

a {
  text-decoration: none;
}

That being said, nesting button elements inside of anchor elements is invalid HTML and should be avoided.

edited Jul 19 '20 at 14:14

answered Jul 19 '20 at 06:14

Robert Cooper

2,160
1
9
22

score 2 · Answer 3 · answered Jul 19 '20 at 06:15

2

Replace a with button or use css rule text-decoration: none

answered Jul 19 '20 at 06:15

Om3ga

30,465
43
141
221

score -2 · Answer 4 · answered Jul 19 '20 at 06:17

.btn {
  font-family: "Times New Roman", Times, serif;
  margin: 10px;
  padding:10px;
  width: 100px;
  height: 30px;
  font-size: 17px;
  font-weight: 200;
  background-color: #f7e7e7;
  color: rgb(49, 126, 126);
  border-radius: 5px;
  border: 1px solid rgb(186, 230, 173);
  box-shadow: 3px 3px rgb(98, 151, 98);
}

a
{
  text-decoration:none;
  color: black;
}

<div>
  <a href="#" class="btn">
    Home
  </a>
  <a href="product.html" class="btn">
   Product
  </a>
  <a href="#" class="btn">
   buy now
  </a>
  <a href="findus.html" class="btn">
    find us
  </a>
</div>

how to clear black dash in html button?

4 Answers4

Links

Buttons