Solution 1 :

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.

Solution 2 :

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.

Solution 3 :

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

Solution 4 :

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

Problem :

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.

Comments

Comment posted by Ajay Malhotra

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

Comment posted by Jeet Viramgama

Got [email protected] thank you

Comment posted by Paulie_D

Links cannot contain buttons and vice versa6. It’s invalid HTML

By

Leave a Reply

Your email address will not be published. Required fields are marked *